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>