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: RESOLVED INVALID
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-10-09 13:35 PDT (History)
7 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
Working test case (1.10 KB, text/html)
2024-10-08 18:44 PDT, Said Abou-Hallawa
no flags Details
Reduced test case (1.34 KB, text/html)
2024-10-09 09:54 PDT, Said Abou-Hallawa
no flags Details

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
Comment 6 Said Abou-Hallawa 2024-10-08 18:44:57 PDT
Created attachment 472872 [details]
Working test case
Comment 7 Said Abou-Hallawa 2024-10-08 18:46:26 PDT
I cannot reproduce this bug. The attached test case works fine with light mode and dark mode on both macOS and iOS.
Comment 8 Simon Fraser (smfr) 2024-10-09 09:40:01 PDT
https://codepen.io/foobarquux/pen/JjddKZw still has incorrect rendering in Safari.
Comment 9 Said Abou-Hallawa 2024-10-09 09:54:23 PDT
Created attachment 472884 [details]
Reduced test case

The reduced test case shows CSS filters each of them is defined as data url and followed by a fragment identifier. For example:

filter: url(data:image/svg+xml,...#desaturate);

This scenario does not work in WebKit.
Comment 10 Said Abou-Hallawa 2024-10-09 10:03:06 PDT
(In reply to Simon Fraser (smfr) from comment #8)
> https://codepen.io/foobarquux/pen/JjddKZw still has incorrect rendering in
> Safari.

This scenario never worked correctly in WebKit. We never parsed a data uri when it is referenced from css filter definition. We even assert in SVG when this happened. See bug 149460.

The screenshot and the discussion above talks about selecting the correct filter definition when it is included in a @media selector. Some of the comments were talking about light and dark modes. The title also indicates it might be a regression in iOS 17.
Comment 11 Said Abou-Hallawa 2024-10-09 10:09:06 PDT
The data uri (or inline SVG) filter bug is covered by bug 211617. The codepen link https://codepen.io/foobarquux/pen/JjddKZw is mentioned there also.
Comment 12 Said Abou-Hallawa 2024-10-09 13:32:46 PDT
This bug has be confusing.

1. The test case "text case (html code): https://bugs.webkit.org/attachment.cgi?id=467784" does not show the filtered element in dark mode on iOS 17 and iOS 18. But this happens also in Safari, Chrome and FireFox on macOS. So I guess there is something wrong with its CSS (did not examine closely the markup).

2. The test case "Working test case: https://bugs.webkit.org/attachment.cgi?id=472872" shows the filtered element in dark mode on iOS 17 and iOS 18. It shows it also correctly on macOS in Safari, Chrome and FireFox.

3. The test case "Reduced test case https://bugs.webkit.org/attachment.cgi?id=472884" does not work in Safari or mobile Safari. And it does work correctly in other browsers. So it is a WebKit bug but this issue is covered by bug 211617.
Comment 13 Said Abou-Hallawa 2024-10-09 13:35:27 PDT
So I am resolving this bug assuming it is about not showing a filtered element in the dark mode given the attached test is invalid.