WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
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
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
View All
Add attachment
proposed patch, testcase, etc.
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
<
rdar://problem/115804577
>
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.
Top of Page
Format For Printing
XML
Clone This Bug