Bug 245510 - backdrop-filter: url(#some-svg-filter) doesn't work with SVG filters like feDisplacementMap
Summary: backdrop-filter: url(#some-svg-filter) doesn't work with SVG filters like feD...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-09-21 19:13 PDT by Julius Tarng
Modified: 2023-08-09 07:31 PDT (History)
9 users (show)

See Also:


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 Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Julius Tarng 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)
Comment 1 Ahmad Saleem 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!
Comment 2 Radar WebKit Bug Importer 2022-09-28 19:14:18 PDT
<rdar://problem/100539266>
Comment 3 Said Abou-Hallawa 2022-09-29 11:12:12 PDT
Created attachment 462714 [details]
Simpler repro test case
Comment 4 loren.brichter 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.
Comment 5 Vanyadoing 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?
Comment 6 Vanyadoing 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
Comment 7 Vanyadoing 2023-08-09 07:31:44 PDT
Here is where the bug can be checked

https://codepen.io/vanyadoing/pen/YzRbZEQ