currentColor 似乎在 Safari 中得到 "stuck"

Question

我正在尝试使用 CSS currentColor 作为边框颜色，使用 :after 内容生成 CSS 三角形。这在我试过的所有浏览器中都很好用，除了一个：Safari 似乎从它生成的第一个三角形缓存 currentColor，然后在任何地方使用它。

这是我所看到的 -- Chrome（以及 Firefox 和 IE9+）的预期行为：

Safari 8.0.4 在 Yosemite 10.10.2 上的不正确行为（在 iOS 8.2 上也是如此）——注意所有三个三角形都是红色的，而不是它们元素的当前颜色：

这里 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 规范的解释问题？

更重要的是，有什么解决这个问题的建议吗？我不想在单独的 :after 规则中为每个元素显式声明颜色。（使用 currentColor 确实简化了维护，因为我们的其他 CSS 发生了变化。）

Answer 1

所以，结果是 actual Safari bug（可能很快就会修复）。

我能够使用 this suggestion 解决这个问题，边框颜色默认为 currentColor。替换为：

    border-color: currentColor transparent transparent transparent;

具有避免提及 currentColor 的扩展属性：

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

问题在 Safari 中消失了（在其他浏览器中仍然有效）。

Answer 2

即使我遇到了类似的问题，所以我不得不使用一个小 js 技巧。

通过这个技巧，我们可以使用 currentColor 属性在所需元素中正确设置。但它可以实现仅对普通元素。所以我将伪元素移动到普通元素中。

You have to force safari to redraw elements to achieve this. To achieve redrawing elements simply hide and show it.

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

伪元素无法通过此技巧实现。您必须将其移动到 span 或其他元素中。

currentColor 似乎在 Safari 中得到 "stuck"

currentColor seems to get "stuck" in Safari

css

safari

mobile-safari