Question

最新的Chrome版本（49）中存在一个错误，其中CSS就像......

background: linear-gradient(currentColor, green);

...当元素的color发生变化时（例如on：hover），不会更新。

我如何解决这个问题？

Answer 1

如果重新绘制元素（See this question），则渲染将更新。

e.g。

通过另外更改触发重绘的任意属性，可以在元素的color发生更改时强制重绘。

该属性应该是......

仅限webkit（减少副作用）
overridable（仅在值更改时才会重绘元素）
很少重要（因为我们需要假设该元素没有设置在元素上但是以最小的后果覆盖它）
本身没有明显的效果

＆＃13;

.box {
    width: 200px;
    height: 200px;
    
    background: linear-gradient(currentColor, green);
    
    color: #f00;
}

.box:hover {
    color: blue;
    
    /* arbitrary webkit-only property that forces a redraw */
    -webkit-margin-start: .1px;
}

＆＃13;

<div class="box"></div>

＆＃13;

Answer 2

您可以使用border绘制颜色块，因为border-color会自动继承color道具，然后在其上绘制linear-gradient(to right, white, transparent)。然后边框块看起来像是从白色到currentColor

的线性渐变

查看演示：.g2显示错误，.gradient显示黑客。

http://jsbin.com/luzute/1/edit?html,css,output

您可以调整white的透明度（如rgba(255,255,255,0.5)）以调整渐变的亮度，或将白色更改为透明度黑色（rgba(0,0,0,0.5)）以加深渐变

如何使用chrome中的currentColor bug破解线性渐变（）

2 个答案: