Bug 261806 - iOS 17 > inline SVG can't apply CSS filter property effect
Summary: iOS 17 > inline SVG can't apply CSS filter property effect
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 17
Hardware: iPhone / iPad Other
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2023-09-20 00:05 PDT by Paul Li
Modified: 2024-05-07 09:41 PDT (History)
6 users (show)

See Also:

Attachments
Same code for reproduce the problem (280.44 KB, image/png)
2023-09-20 00:05 PDT, Paul Li 		no flags Details
text case (html code) (989 bytes, text/html)
2023-09-20 03:10 PDT, Paul Li 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Paul Li 2023-09-20 00:05:19 PDT 
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.
Comment 1 Ahmad Saleem 2023-09-20 02:18:35 PDT 
@Paul - Can you attach test case via attachment or JSFiddle or JSBin etc.?
Comment 2 Paul Li 2023-09-20 03:10:39 PDT 
Created attachment 467784 [details]
text case (html code)

Here comes the test case.
Comment 3 Paul Li 2023-09-20 03:12:11 PDT 
Expect:
Once turn to Dark mode, the SVG should applied CSS filter.
Comment 4 Radar WebKit Bug Importer 2023-09-20 14:32:06 PDT 
<rdar://problem/115804577>
Comment 5 Karl Dubost 2023-09-20 16:47:44 PDT 
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