UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36

Steps to reproduce the problem:
1. Create an SVG graphic which renders something with <use>
2. Set fill colour on the <use> element
3. Apply the CSS rule * { transition: all 0.2s ease; }

Attached a minimal reproduction HTML, but also here's a Codepen: https://codepen.io/daaain/pen/MvZLMQ

What is the expected behavior?
That the CSS rule doesn't change the SVG graphic at all and the colour gets inherited by the shape inside the shadow DOM.

What went wrong?
The colour doesn't get inherited and the shape renders with the default black fill.

This is the case in Firefox and Safari.

Did this work before? No 

Does this work in other browsers? Yes

Chrome version: 60.0.3112.113  Channel: stable
OS Version: OS X 10.12.6
Flash Version:
 

Deleted: bug.html 330 bytes

bug.html 330 bytes View Download