RESOLVED INVALID Bug 261806
iOS 17 > inline SVG can't apply CSS filter property effect
https://bugs.webkit.org/show_bug.cgi?id=261806
Summary iOS 17 > inline SVG can't apply CSS filter property effect
Paul Li
Reported 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.
Attachments
Same code for reproduce the problem (280.44 KB, image/png)
2023-09-20 00:05 PDT, Paul Li
no flags
text case (html code) (989 bytes, text/html)
2023-09-20 03:10 PDT, Paul Li
no flags
Working test case (1.10 KB, text/html)
2024-10-08 18:44 PDT, Said Abou-Hallawa
no flags
Reduced test case (1.34 KB, text/html)
2024-10-09 09:54 PDT, Said Abou-Hallawa
no flags
Ahmad Saleem
Comment 1 2023-09-20 02:18:35 PDT
@Paul - Can you attach test case via attachment or JSFiddle or JSBin etc.?
Paul Li
Comment 2 2023-09-20 03:10:39 PDT
Created attachment 467784 [details] text case (html code) Here comes the test case.
Paul Li
Comment 3 2023-09-20 03:12:11 PDT
Expect: Once turn to Dark mode, the SVG should applied CSS filter.
Radar WebKit Bug Importer
Comment 4 2023-09-20 14:32:06 PDT
Karl Dubost
Comment 5 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
Said Abou-Hallawa
Comment 6 2024-10-08 18:44:57 PDT
Created attachment 472872 [details] Working test case
Said Abou-Hallawa
Comment 7 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.
Simon Fraser (smfr)
Comment 8 2024-10-09 09:40:01 PDT
https://codepen.io/foobarquux/pen/JjddKZw still has incorrect rendering in Safari.
Said Abou-Hallawa
Comment 9 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.
Said Abou-Hallawa
Comment 10 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.
Said Abou-Hallawa
Comment 11 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.
Said Abou-Hallawa
Comment 12 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.
Said Abou-Hallawa
Comment 13 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.
Note You need to log in before you can comment on or make changes to this bug.