1882178 - Using CSS `border-radius` or `overflow: hidden` on a parent element breaks `backdrop-filter`

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

[andersons.burner]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:123.0) Gecko/20100101 Firefox/123.0

Steps to reproduce:

Use border-radius or overflow: hidden on a parent element of backdrop-filter in a certain way, which may or may not be the only way to reproduce this

See https://codepen.io/aentwist/pen/qBvegpX CSS L17,18

Actual results:

backdrop-filter breaks

Expected results:

These properties aren't documented to have stacking context implications. It shouldn't have an effect. Open the reproduction in Chrome

Comment 1

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

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

Comment 2

[Mayank Bansal]

Attachment: Reporters_standalone_testcase.html

Comment 3

[Teodor Tanasoaia [:teoxoy]]

I can also reproduce the issue on stable v123.

Comment 5

[Kagami Rosylight [:saschanaz] (they/them)]

Coming from bug 1882178. Copypasting it:

1. Open data:text/html,<div style="position: absolute; top: 0; left: 0; border-radius: 50%; overflow:hidden"><div style="transform: rotate(0deg); backdrop-filter: blur(15px);%20 width: 100px; height: 100px;"></div></div><div>lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>
2. See if the backdrop filter applies

Expected: A circle with backdrop filter on top of the text
Actual: No visible circle

Unchecking either transform, border-radius, or overflow on Devtools restores backdrop filter.

Comment 6

[Jeff Muizelaar [:jrmuizel]]

Glenn, can you take a look? Since this shows up beta.maps.apple.com it would be nice to have fixed to our improve our position when asking them to enable that site for Firefox.

Comment 7

[Glenn Watson [:gw]]

Looking in to this as part of https://bugzilla.mozilla.org/show_bug.cgi?id=1909933