如何使用chrome中的currentColor bug破解线性渐变()

Question

最新的Chrome版本(49)中存在一个错误,其中CSS就像......

background: linear-gradient(currentColor, green);

... color元素更改时不会更新(例如:on:hover).

我该如何解决这个问题？

Answer 1

如果重绘元素,渲染将更新(请参阅此问题).

例如

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

该物业应该......

1. 仅限webkit(减少副作用)
2. 可覆盖(如果值更改,则仅重绘元素)
3. 很少重要(因为我们需要假设该属性没有设置在元素上但是以最小的后果覆盖它)
4. 本身没有明显的效果

.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;
}

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