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.
@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.
<rdar://problem/115804577>
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 472872 [details] Working test case
I cannot reproduce this bug. The attached test case works fine with light mode and dark mode on both macOS and iOS.
https://codepen.io/foobarquux/pen/JjddKZw still has incorrect rendering in Safari.
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.
(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.
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.
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.
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.