Bug 261806 – iOS 17 > inline SVG can't apply CSS filter property effect

• Component: CSS
• Status: RESOLVED INVALID

[Paul Li]

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.

[Ahmad Saleem]

@Paul - Can you attach test case via attachment or JSFiddle or JSBin etc.?

[Paul Li]

Created attachment 467784 [details]
text case (html code)

Here comes the test case.

[Paul Li]

Expect:
Once turn to Dark mode, the SVG should applied CSS filter.

[Radar WebKit Bug Importer]

<rdar://problem/115804577>

[Karl Dubost]

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]

Created attachment 472872 [details]
Working test case

[Said Abou-Hallawa]

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)]

https://codepen.io/foobarquux/pen/JjddKZw still has incorrect rendering in Safari.

[Said Abou-Hallawa]

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]

(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]

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]

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]

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.