Bug 254549 – REGRESSION(259807@main): CSS variables are not applied to the SVG use element's shadow tree

• Status: RESOLVED
• Resolution: FIXED
• Component: SVG

[Mauri]

We're using CSS variables to style things inside an SVG. We're dynamically importing SVGs using the `<use>` element. This element creates a Shadow DOM. We're not able to see variables inside that Shadow DOM.

Steps to Reproduce: 
    
    1) Use iOS Safari 16.4 (it works fine on 16.3)      

    2) Go to this page https://ios-safari-bug-yt1o.glide.page
    
    3) You'll see two buttons, Add and Delete, with their icons.


Actual Results:

    Icons are black colored.

Expected Results:

    Icons should match the text color.
 
Build Date & Hardware:
     
    Build 2023-03-27 on iOS 16.4 running on iPhone 13 Pro.

Additional Builds and Platforms:

    Works fine on iOS 16.3, Mac OS Safari Version 16.3 (18614.4.6.1.6), Chrome, and Firefox.

[Ahmad Saleem]

I am able to reproduce this with Safari Technology Preview 166 as well.

Chrome Canary 114 and Firefox Nightly 113 works fine.

Since it worked fine in 16.3 but not in 16.4, should we rename title to add [Regression - 16.4]?

[Ahmad Saleem]

NOTE - WebKit ToT (262178@main) also has same behavior as Safari 16.4. So this is not fixed yet on trunk as well.

[Radar WebKit Bug Importer]

<rdar://problem/107295588>

[Mauri]

(In reply to Ahmad Saleem from comment #1)
> I am able to reproduce this with Safari Technology Preview 166 as well.
> 
> Chrome Canary 114 and Firefox Nightly 113 works fine.
> 
> Since it worked fine in 16.3 but not in 16.4, should we rename title to add
> [Regression - 16.4]?

Thanks for looking at it. It's the first time I report something here, I'm happy to update the title if that's something I should do.

How do you handle these cases?

[Said Abou-Hallawa]

This seems to be a recent regression. I could narrow it down to one of these changes https://commits.webkit.org/compare/259818@main...259759@main

[Mauri]

(In reply to Mauri from comment #0)
> We're using CSS variables to style things inside an SVG. We're dynamically
> importing SVGs using the `<use>` element. This element creates a Shadow DOM.
> We're not able to see variables inside that Shadow DOM.
> 
> Steps to Reproduce: 
>     
>     1) Use iOS Safari 16.4 (it works fine on 16.3)      
> 
>     2) Go to this page https://ios-safari-bug-yt1o.glide.page
>     
>     3) You'll see two buttons, Add and Delete, with their icons.
> 
> 
> Actual Results:
> 
>     Icons are black colored.
> 
> Expected Results:
> 
>     Icons should match the text color.
>  
> Build Date & Hardware:
>      
>     Build 2023-03-27 on iOS 16.4 running on iPhone 13 Pro.
> 
> Additional Builds and Platforms:
> 
>     Works fine on iOS 16.3, Mac OS Safari Version 16.3 (18614.4.6.1.6),
> Chrome, and Firefox.

Updating steps to reproduce it:

Go to: https://ios-svg-bug.vercel.app/

You should see a red magnifying glass, instead, you're seeing a black one.

We manage to temporarily work around this on Safari 16.4, so the original URL for reproducing this won't work anymore. Please use https://ios-svg-bug.vercel.app/ instead

[Antti Koivisto]

Pull request: https://github.com/WebKit/WebKit/pull/12488

[EWS]

Committed 262698@main (abf098f7f5b0): <https://commits.webkit.org/262698@main>

Reviewed commits have been landed. Closing PR #12488 and removing active labels.

[Antti Koivisto]

The bug was specifically that custom properties were not inherited to the root element of an external SVG resource when it was used as a <use> target.

[Mauri]

wow! Thank you so much for fixing this! 

When do we expect this to be released? Is there any doc that talks about your release cycle?

[Said Abou-Hallawa]

*** Bug 255282 has been marked as a duplicate of this bug. ***

[Jen Simmons]

> Is there any doc that talks about your release cycle?

No. 

> When do we expect this to be released?

I'd recommend testing in a future Safari 16.5 beta or later.

[Said Abou-Hallawa]

*** Bug 255985 has been marked as a duplicate of this bug. ***