Following conditions need to be met: 1. have an SVG element nested in HTML document 2. in the SVG, have a DEFS element, containing any element with id and class 3. in the SVG, have an USE element referring to an element in DEFS 4. have a CSS rule targeting the class of the element in DEFS. CSS rule has to contain HTML parent of the element, such as "svg .myClass" or "body .myClass" Result: CSS rule is not applied. JsFiddle capturing the use case: http://jsfiddle.net/maros_urbanec/yNg8r/3/ - circle should be red Once its HTML ancestor is removed from the CSS rule, the rule is applied correctly: http://jsfiddle.net/maros_urbanec/yNg8r/4/
Created attachment 460314 [details] Safari 15.5 matches with Chrome but differs from Firefox I am not able to reproduce this bug in Safari 15.5 on macOS 12.4 based on JSFiddle from Comment 01 (with "svg .myCircle" - CSS tag) and it shows expected result of "red circle". It matches with Chrome Canary 105 as shown in the attached screenshot but as seen, Firefox Nightly does not render it as "red" rather "black". I am not sure on web-spec and which behavior is accurate but based on expected result, I am not able to reproduce this bug and this can be marked as "RESOLVED INVALID" or "RESOLVED CONFIGURATION CHANGED". In case, if Firefox behavior is ideal then it can be changed to "NEW". If I am testing incorrectly, please retest accordingly. Thanks!
<rdar://problem/95417526>
Yup, config changed.