Style changes are not working inside SVG symbols

• Component: SVG
• Status: NEW ---

Created attachment 414859 [details]
JavaScript Change Test Case

JavaScript changes to element styles inside SVG <symbol> are not visible. JavaScript can change the element's style, but the changes are not visible on the page. Similarly, changes are not visible on the page when a <use> element references an element and the element's style is changed. So, it seems that changes are not updated in the SVG <use> element's shadow DOM.

The attached 'JavaScript Change Test Case' shows four circles. Pressing "Toggle Opacity" should change them to four smiling faces (three yellow and one blue). Only the blue smiling face is visible.

- The first two yellow faces are <use> elements referencing <symbol>.
- The third yellow face is a <use> element referencing <path>.
- The fourth blue face is just a path (no <use> or <symbol> elements involved), so it works as expected.

Note: hovering over the circles with a mouse will make the changes visible!

Chrome 87 and Firefox 83 show all four smiling faces as expected.

Tested on Safari Technology Preview Release 116 (Safari 14.1, WebKit 15611.1.5.3) and Safari 14.0.1.

There's a similar bug about CSS animations and this bug might be related to it: https://bugs.webkit.org/show_bug.cgi?id=173154

Created attachment 414860 [details]
JavaScript Change Screenshot

[Smoley]

Thanks for filing, I can reproduce this on Safari 13.1.3 as well as STP 116 with the provided test case.

[Radar WebKit Bug Importer]

<rdar://problem/71857275>

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.6 and Safari Technical Preview 151 using attached test and upon toggle, it only change last circle to blue smily emoji or emoticon but all other three remain dots but in other browsers (Chrome Canary 106 and Firefox Nightly 105), they change to yellow emoticons or emoji. Thanks!