When using Web Animation API to update CSS Variables, root CSS variables are not updated. Child elements do reflect updated variables. commitStyles() works (but would violate inline-style csp). eg: box3 .animate([{ '--background-color': 'gray', '--color': 'blue', }], { duration: 0, fill: 'forwards', }); See codepen: https://codepen.io/shortfuse/pen/JjBpeQX For comparison, all tests pass on Chrome and no CSS Variable related tests pass on Firefox.
From https://codepen.io/shortfuse/pen/JjBpeQX Background-Color = Root Foreground-Color = Child Feature Result 1. Root CSS Property 2. Child CSS Property 3 Root CSS Variable 4. Child CSS Variable 5. Commited Root CSS Variable 6. Commited Child CSS Variable 1 2 3 4 5 6 Safari P P X P P P Firefox P P X X X X Chrome P P P P P P P PASS X FAIL Probably part of Bug 235138
<rdar://problem/104584506>
This is already fixed on ToT, specifically this progressed with 258514@main. Dupe of bug 210963. *** This bug has been marked as a duplicate of bug 210963 ***