| Summary: | iOS 17 > inline SVG can't apply CSS filter property effect | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Paul Li <meistudioli> | ||||||
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | NEW --- | ||||||||
| Severity: | Normal | CC: | ahmad.saleem792, graouts, ian, karlcow, sabouhallawa, webkit-bug-importer | ||||||
| Priority: | P2 | Keywords: | BrowserCompat, InRadar | ||||||
| Version: | Safari 17 | ||||||||
| Hardware: | iPhone / iPad | ||||||||
| OS: | Other | ||||||||
| See Also: |
https://bugs.webkit.org/show_bug.cgi?id=201336 https://bugs.webkit.org/show_bug.cgi?id=246106 https://bugs.webkit.org/show_bug.cgi?id=211617 |
||||||||
| Attachments: |
|
||||||||
@Paul - Can you attach test case via attachment or JSFiddle or JSBin etc.? Created attachment 467784 [details]
text case (html code)
Here comes the test case.
Expect: Once turn to Dark mode, the SVG should applied CSS filter. There is a combination of two things here. Nested syntax and @media.
Maybe a more reduced test case would help.
Let's see.
Simpler test
body {background-color: gold;}
@media (prefers-color-scheme: light) {
svg { filter: invert(1); }
}
This is confirmed.
Maybe a duplicate of Bug 211617
|
Created attachment 467781 [details] Same code for reproduce the problem Safari Version : 17 OS : iOS 17 Steps to reproduce the problem 1. install iOS 17. 2. turn on safari and check inline SVG style which applied "filter". What is the expected behavior? 1. inline SVG should applied CSS > filter effect. What went wrong? 1. inline SVG doesn't applied CSS > filter effect. Check Sample code form attachment please.