Bug 245510

Summary: backdrop-filter: url(#some-svg-filter) doesn't work with SVG filters like feDisplacementMap
Product: WebKit Reporter: Julius Tarng <tgym.candycorn+bugzilla>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, bfulgham, chrisyalamov, dino, loren.brichter, maggotfish, m_dubet, philipp.sklorz.development, sabouhallawa, simon.fraser, vanyadoing, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=112265
https://bugs.webkit.org/show_bug.cgi?id=297770
Attachments:
Description Flags
Compare chrome (left) and safari (right) displacement
none
Simpler repro test case
none
-webkit-backdrop-filter: url() doesn't work under Mac and IOS none

Julius Tarng
Reported 2022-09-21 19:13:10 PDT
Created attachment 462523 [details] Compare chrome (left) and safari (right) displacement Reproduction: https://codepen.io/tarngerine/pen/poVrLEe Expected: See feDisplacementMap filter effect the "Hello" text Actual: No effect Given an HTML element with CSS applied `backdrop-filter`, with a `url(#...)` referencing an SVG `<filter>`, the filter will not be properly applied. It works in Chromium (see attachment)
Attachments
Compare chrome (left) and safari (right) displacement (733.47 KB, image/png)
2022-09-21 19:13 PDT, Julius Tarng 		no flags
Details
Simpler repro test case (149 bytes, text/html)
2022-09-29 11:12 PDT, Said Abou-Hallawa 		no flags
Details
-webkit-backdrop-filter: url() doesn't work under Mac and IOS (41 bytes, patch)
2023-08-09 07:29 PDT, Vanyadoing 		no flags
DetailsFormatted DiffDiff
View All Add attachment proposed patch, testcase, etc.
Ahmad Saleem
Comment 1 2022-09-23 13:13:27 PDT
I am able to reproduce this in Safari 16 and Safari Technology Preview 154 and it does not show any effect on "Hello" while Chrome Canary 108 does show distortion effect and Firefox does not show similar to Safari but it could be due to -webkit-. Thanks!
Radar WebKit Bug Importer
Comment 2 2022-09-28 19:14:18 PDT
<rdar://problem/100539266>
Said Abou-Hallawa
Comment 3 2022-09-29 11:12:12 PDT
Created attachment 462714 [details] Simpler repro test case
loren.brichter
Comment 4 2023-03-31 07:05:01 PDT
SVG color matrix filters as backdrop-filters don't seem to work either? e.g. defining <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> <filter id="matrix-test"> <feColorMatrix type="matrix" values="1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"> </feColorMatrix> </filter> </svg> and setting -webkit-backdrop-filter: url(#matrix-test); backdrop-filter: url(#matrix-test); works in firefox, brave, chrome, etc, but not Safari.
Vanyadoing
Comment 5 2023-08-09 07:29:55 PDT
Created attachment 467229 [details] -webkit-backdrop-filter: url() doesn't work under Mac and IOS Almost the year passed from bug discovering? Would it be fixed?
Vanyadoing
Comment 6 2023-08-09 07:30:38 PDT
Comment on attachment 467229 [details] -webkit-backdrop-filter: url() doesn't work under Mac and IOS https://codepen.io/vanyadoing/pen/YzRbZEQ
Vanyadoing
Comment 7 2023-08-09 07:31:44 PDT
Here is where the bug can be checked https://codepen.io/vanyadoing/pen/YzRbZEQ
chrisyalamov
Comment 8 2025-06-11 07:27:38 PDT
Just checking, are there any updates on these/intent to address the bug?
Karl Dubost
Comment 9 2025-08-28 00:26:23 PDT
*** Bug 297770 has been marked as a duplicate of this bug. ***
Note You need to log in before you can comment on or make changes to this bug.