1955851 - Mask-image doesn't work with child elements that use backdrop-filter blur

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect)

Description

[Paul Rhomberg]

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

Steps to reproduce:

When applying a mask-image to a container, child elements with the backdrop-filter: blur attribute are unaffected. This works fine in Chromium.

See code example: https://codepen.io/therealpaulplay/pen/dPyKRLV

HTML:
<div class="scroll-box">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="blur-block"></div>
</div>

CSS:
.block {
min-width: 200px;
height: 300px;
background-color: red;
}

.scroll-box {
width: 500px;
display: flex;
justify-content: safe center;
gap: 10px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
height: fit-content;
overflow-x: auto;
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.blur-block {
min-width: 200px;
height: 300px;
background-color: green;
backdrop-filter: blur(10px);
}

Actual results:

The element with the backdrop-filter style does not fade out, whereas all other elements fade out properly due to the mask image.

Expected results:

The green element with the backdrop-filter should be affected the same way by the mask-image.

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.