1781159 - element with backdrop-filter on top of element with filter does not display

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

[tristan.menzel]

Attachment: ff-bug.png

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

Steps to reproduce:

Given this working example where we have an absolutely positioned white box placed over text, containing an absolutely positioned green box with a backdrop-filter blur:

<p style='max-width: 300px'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum, mauris in interdum aliquam, mi risus rhoncus dui, et malesuada lectus nisi sit amet tortor. Pellentesque sagittis purus magna, sit amet malesuada turpis porttitor a. Proin accumsan diam a blandit dignissim. Fusce sit amet augue erat. Pellentesque auctor gravida leo, a gravida sapien pellentesque in. Aliquam auctor convallis nisi, in mattis dolor fermentum sed. Maecenas posuere mi sed vestibulum rhoncus. Cras volutpat turpis vel neque ornare auctor. Nullam urna dui, dignissim sed interdum a, facilisis sit amet justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt, augue ut imperdiet convallis, elit odio elementum erat, id dictum turpis sem id nunc. 
</p>
<div style='position: absolute; left: 50px; top: 50px; width: 150px; height: 150px; background: rgba(255 255 255 / .75);'>Maecenas tincidunt, augue ut imperdiet convallis, elit odio elementum erat, id dictum turpis sem id nunc. <span style='position: absolute; inset: 30px; background-color: rgba(0 255 0 / .25); backdrop-filter: blur(4px);'></span></div>

If we add a filter: drop-shadow(0 0 10px rgba(0 255 255 / .9)); to the outer white box, the inner green box fails to render.

<p style='max-width: 300px'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum, mauris in interdum aliquam, mi risus rhoncus dui, et malesuada lectus nisi sit amet tortor. Pellentesque sagittis purus magna, sit amet malesuada turpis porttitor a. Proin accumsan diam a blandit dignissim. Fusce sit amet augue erat. Pellentesque auctor gravida leo, a gravida sapien pellentesque in. Aliquam auctor convallis nisi, in mattis dolor fermentum sed. Maecenas posuere mi sed vestibulum rhoncus. Cras volutpat turpis vel neque ornare auctor. Nullam urna dui, dignissim sed interdum a, facilisis sit amet justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt, augue ut imperdiet convallis, elit odio elementum erat, id dictum turpis sem id nunc. 
</p>
<div style='position: absolute; left: 50px; top: 50px; width: 150px; height: 150px; background: rgba(255 255 255 / .75); filter: drop-shadow(0 0 10px rgba(0 255 255 /.9));'>Maecenas tincidunt, augue ut imperdiet convallis, elit odio elementum erat, id dictum turpis sem id nunc. <span style='position: absolute; inset: 30px; background-color: rgba(0 255 0 / .25); backdrop-filter: blur(4px);'></span></div>

Curiously if you also add a backdrop-filter: blur(4px) to the outer white box, the green box returns and the shadow is still shown

<p style='max-width: 300px'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum, mauris in interdum aliquam, mi risus rhoncus dui, et malesuada lectus nisi sit amet tortor. Pellentesque sagittis purus magna, sit amet malesuada turpis porttitor a. Proin accumsan diam a blandit dignissim. Fusce sit amet augue erat. Pellentesque auctor gravida leo, a gravida sapien pellentesque in. Aliquam auctor convallis nisi, in mattis dolor fermentum sed. Maecenas posuere mi sed vestibulum rhoncus. Cras volutpat turpis vel neque ornare auctor. Nullam urna dui, dignissim sed interdum a, facilisis sit amet justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt, augue ut imperdiet convallis, elit odio elementum erat, id dictum turpis sem id nunc. 
</p>
<div style='position: absolute; left: 50px; top: 50px; width: 150px; height: 150px; background: rgba(255 255 255 / .75); filter: drop-shadow(0 0 10px rgba(0 255 255 /.9));backdrop-filter: blur(4px);'>Maecenas tincidunt, augue ut imperdiet convallis, elit odio elementum erat, id dictum turpis sem id nunc. <span style='position: absolute; inset: 30px; background-color: rgba(0 255 0 / .25); backdrop-filter: blur(4px);'></span></div>

Actual results:

When an child of an element with a drop shadow filter is styled with a back drop filter it fails to render. (See code sample 2 above - there is no green box)

Expected results:

The green box should render on top of the white box regardless of drop shadow filter. This appears to work fine in chrome (103.0.5060.134)

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

[Emilio Cobos Álvarez (:emilio)]

Attachment: Test-case from reporter.

Comment 3

[Ina Popescu, Desktop QA]

I've managed to reproduce this issue on the latest versions Nightly 105.0a1 and Firefox 103.0.2 on Windows10 x64.
Setting this as NEW.

Comment 4

[Malus]

Attachment: Test case #2

Enjoy another test case (Made this before I discovered that the bug is already reported)

Comment 5

[Malus]

From my tests, I've also discovered that the only filter methods which seem to affect the underlying backdrop-filter in this way are drop-shadow() and blur(). Other filter methods like hue-rotate() do not cause this bug (Note: The expected behavior still seems weird to me – in that it layers the background on top of the filter – but seems to be consistent across browsers, so it is unrelated to this bug).