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

Status: RESOLVED WORKSFORME

(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]]

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

Comment 3

[Jamie]

From what I can tell, the examples posted here have all been resolved in 133.0.3 (aarch64). Unfortunately, I've encountered yet another edge case that still surfaces the issue.

This issue seems to persist when a parent container has a border-radius, position, and overflow: hidden set and an intermediate ancestor has a transform applied. You can see my reproduction in this Codesandbox (and my hacky Firefox-specific workaround 😅).

That said, I haven't entirely nailed down the exact combination of contributing factors as I was also able to reproduce it in the initial Codepen by setting border-radius and overflow: hidden on the root container, and I don't see a transform applied in that example. See the UPDATES in my fork of the Codepen.

Let me know if there's a better place to post this or if I should open a new bug.

Thank you!

Comment 4

[Glenn Watson [:gw]]

As far as I can tell from a quick sweep of the linked cases, these are all resolved now on current nightly. If any of these cases do still repro, please reopen this bug with details.