1808785 - feTurbulence/feDisplacement don’t work with SVG backdrop-filters.

Status: NEW

(Core :: Graphics, defect)

Description

[Luke Deen Taylor]

Attachment: Firefox (left) vs chrome (right)

Steps to reproduce:

Consider the following reproduction, which applies a SVG filter (defined using a single feTurbulence layer and a single feDisplacement layer) to the “filter” of one element and the “backdrop-filter” of another: https://codepen.io/controversial/pen/zYLoobM

Actual results:

In the above codepen reproduction, notice that the HTML element with the SVG filter passed for its filter() is distorted, but the HTML element with a SVG filter passed for its backdrop-filter() does not distort its backdrop.

Expected results:

The paragraph should be distorted and the backdrop behind the white element should both be distorted—backdrop-filter should have similar SVG filter behavior to filter (note that Chrome distorts both elements as expected).

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::SVG' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Kelsey Gilbert [:jgilbert]]

Confirmed difference between Firefox and Chrome on Windows. Probably not hugely impactful, so S4.
Over to :gw

Comment 3

[Glenn Watson [:gw]]

We don't currently support SVG filter graphs on backdrop-filter. We have some work planned for H1 2023 that will add more native SVG filter support to webrender, we can build off this SVG filters in backdrop-filter.