1782876 - backdrop-filter fails to render properly when parent has transform/opacity/clip-path/mask-image etc

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect)

Description

[Hansol Kim (zvuc)]

Attachment: Screen Shot 2022-08-03 at 15.50.11.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:103.0) Gecko/20100101 Firefox/103.0

Steps to reproduce:

Now that Firefox 103 shipped backdrop-filter to public without a flag... I'm noticing cases where backdrop-filter fails to render properly under specific circumstances.

I made a test case where you can combine different properties with backdrop-filter to see if it works out as it should. (It was initially for Chrome—Chrome has its own set of problems related to backdrop-filter)

Test case: https://codepen.io/zvuc/pen/KKXWGbe?editors=1100

Actual results:

Firefox seems to have trouble rendering backdrop-filter on child element when parent has either transform/opacity/clip-path/mask-image, observing from the test case.

Interestingly, when parent has backdrop-filter too, the issue is gone.

Expected results:

The backdrop-filter should render correctly.

Comment 1

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

The severity field is not set for this bug.
:gw, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 2

[curtdulmage]

In case it is useful, I created a CodePen demo that helped me demonstrate this issue:
https://codepen.io/beefchimi/pen/vYjmQKO

Also, I elaborate a bit more on it in this StackOverflow issue:
https://stackoverflow.com/questions/73776282/using-backdrop-filter-blur-against-an-element-without-a-background