Bug 219282

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