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:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

ahmad.saleem792, bfulgham, dino, loren.brichter, m_dubet, sabouhallawa, simon.fraser, vanyadoing, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

Unspecified

OS:

Unspecified

See Also:

https://bugs.webkit.org/show_bug.cgi?id=112265

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

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