currentColor似乎在Safari中「卡住」

我試圖使用CSS currentColor作爲邊框顏色來生成CSS三角形，使用：content之後。這在我嘗試過的所有瀏覽器中都很好用，除了一個：Safari似乎是從它生成的第一個三角形緩存currentColor，然後在任何地方使用它。currentColor似乎在Safari中「卡住」

這裏是我所看到的 - 從瀏覽器（和Firefox，和IE9 +）預期行爲：從Safari瀏覽器8.0.4

Chrome screenshot

不正確的行爲在優勝美地10.10.2（同在iOS 8.2 ） - 請注意所有三個三角形是紅色的，他們的元素不是currentColor：

Safari screenshot

這裏的a fiddle with the full code證明的問題。相關的CSS：

span { 
    display: inline-block; 
    border-bottom: 2px solid currentColor; 
} 

span::after { 
    /* Generate a triangle (based on Foundation's css-triangle mixin) */ 
    content:""; 
    display: inline-block; 
    width: 0; 
    height: 0; 
    border: inset 0.4em; 
    /* Safari seems to cache this currentColor... */ 
    border-color: currentColor transparent transparent transparent; 
    border-top-style: solid; 
} 

.red { color: #c00; } 
.blue { color: #009; }

的HTML很簡單：

<div> 
    <span class="red">Red</span> 
    <span>Default</span> 
    <span class="blue">Blue</span> 
</div>

這是在Safari中的錯誤？關於CSS規範的解釋問題？

更重要的是，有什麼建議可以解決這個問題？我討厭必須在每個元素的規則之後單獨顯式聲明顏色。（使用currentColor真的簡化了維護，因爲我們的其他CSS變化。）

來源

2015-04-01 medmunds

這可能類似於[這個問題]（http://stackoverflow.com/questions/23936150/issues-with-css-currentcolor-keyword-in-ios-and-safari），這是使用currentColor與其他CSS選擇器。但迄今爲止唯一的迴應聲稱這是預期的行爲（這與所有其他瀏覽器實現似乎有衝突），或者建議完全避免使用currentColor（我認爲這不適用於我的情況）。 – medmunds 2015-04-01 20:39:11

所以，這原來是一個actual Safari bug（它可能很快就會被修復）。

我能夠解決它使用this suggestion邊框顏色默認爲currentColor。與避免提及currentColor擴展性能

border-color: currentColor transparent transparent transparent;

：替換此

/* border-top-color: currentColor; is the default behavior */ 
    border-right-color: transparent; 
    border-bottom-color: transparent; 
    border-left-color: transparent;

和問題消失在Safari（和它仍然在其他瀏覽器上運行）。

來源

2015-04-03 18:26:44 medmunds

儘管2015年3月29日解決了WebKit錯誤，但修復程序似乎仍未在Safari 8.0.7中着陸。 – medmunds 2015-08-21 01:37:55

這似乎是固定的Safari 9.0.2（也許更早），所以變通辦法不再是必要的。 – medmunds 2015-12-17 01:27:59

這似乎仍然是iOS Safari的一個問題（或者至少是一個非常類似的錯誤）。 – 2016-08-03 07:07:02

即使我面臨類似的問題，所以我不得不去與一個小的js伎倆。

有了這個技巧，我們可以使用currentColor屬性在所需的元素中正確設置。但只有對於普通元素才能實現。所以我將僞元素移入正常元素。

您必須強制safari重繪元素才能實現此目的。要實現重繪元素，只需隱藏並顯示它。

var nodeStack =[element]; while (node = nodeStack.pop()) { if (node.nodeType == 1) { node.style.display="none"; node.style.display=""; var i = node.childNodes.length; while (i--) { nodeStack.push(node.childNodes[i]); } } }

入住這simple codepen（你的代碼稍加修改）

也read this for brief info

僞元素不可以通過這種伎倆來實現。您必須將其移入跨度或其他元素。

來源

2015-12-16 18:00:13

感謝您提供其他選項。 – medmunds 2015-12-17 01:28:34

它看起來像Safari終於拿起了Webkit bugfix（9.0.2或更早），所以應該不再需要這種解決方法。 – medmunds 2015-12-17 01:29:09

currentColor似乎在Safari中「卡住」

回答

相關問題