SVG Animation Chrome Bug

When CSS animation is not used the fill colors on rectangles inside "use" elements are inherited from the "use" elements. When CSS animation is used all the rectangles get the fill color of the last "use". However, when the referenced rectangle comes after the referencing "use" elements in the document, the fills are correct again. The same goes when using CSS variables instead of inheritance and when enclosing the reference element in a "symbol" or "g".

by tikosar

HTML

<h2>Not animated</h2>
<p>Fills are inherited from "use" element as expected</p>
<svg width=300 height=200 viewBox="0 0 300 200">
	<rect id=rect x=0 y=0 width=50 height=50 />
	<use href=#rect y=70 fill=green />
	<use href=#rect y=140 fill=orange />
</svg>

<h2>Animated</h2>
<p>The referenced element and all the references get the same fill, which is the last element's fill</p>
<svg width=300 height=200 viewBox="0 0 300 200">
	<rect id=rect-anim-1 class=anim x=0 y=0 width=50 height=50 />
	<use href=#rect-anim-1 y=70 fill=green />
	<use href=#rect-anim-1 y=140 fill=orange />
</svg>

<h2>Animated. CSS variables instead of inheritance</h2>
<p>Same result</p>
<svg width=300 height=200 viewBox="0 0 300 200">
	<rect id=rect-anim-2 class=anim x=0 y=0 width=50 height=50 style="fill: var(--fill)" />
	<use href=#rect-anim-2 y=70 style="--fill: green" />
	<use href=#rect-anim-2 y=140 style="--fill: orange" />
</svg>

<h2>Animated. The referenced element comes later</h2>
<p>However with the referenced element coming after the referencing "use" element in the document order, fills are correct again.</p>
<svg width=300 height=200 viewBox="0 0 300 200">
	<use href=#rect-anim-later y=70 fill=green />
	<use href=#rect-anim-later y=140 fill=orange />
	<rect id=rect-anim-later class=anim x=0 y=0 width=50 height=50 />
</svg>

CSS

/* Some initial values to inherit */
svg {
	fill: red;
}

.anim {
	animation: slide 3s linear 1;
}
@keyframes slide {
	from {
		transform: translateX(-50px);
	}
	to {
		transform: translateX(300px);
	}
}