currentColor 似乎在 Safari 中“卡住”了

Question

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

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

Safari 8.0.4 在 Yosemite 10.10.2 上的错误行为（在 iOS 8.2 上相同）——注意所有三个三角形都是红色的，而不是它们元素的 currentColor：

这是 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 属性在所需元素中正确设置。但只能用于普通元素。所以我将伪元素移动到普通元素中。

您必须强制 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

无法通过这个技巧实现伪元素。您必须将其移动到跨度或其他元素中。