How to hack around linear-gradient() with currentColor bug in chrome

Question

There's a bug in the latest Chrome release (49) where CSS like…

background: linear-gradient(currentColor, green);

…isn't updated when the color of the element changes (e.g. on :hover).

How do I hack around this?

Answer 1

The rendering will update if the element is redrawn (See this question).

e.g.

You can force a redraw when the color of the element changes by additionally changing an arbitrary property that triggers a redraw.

The property should be…

1. webkit only (to reduce side-effects)
2. overridable (element will only be redrawn if value changes)
3. rarely important (because we need to assume that the property isn't set on the element yet to override it with the least consequences)
4. have no visible effects by itself

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

Answer 2

You can use border to draw a block of color because border-color auto inherits the color prop, then draw a linear-gradient(to right, white, transparent) on it. Then the border block will look like a linear-gradient from white to the currentColor

See demo: the .g2 shows the bug and .gradient shows the hack.

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

You can adjust the white's transparency(like rgba(255,255,255,0.5)) to adjust the lighten of the gradient or change white to transparency black(rgba(0,0,0,0.5)) to deepen the gradient.