1797051 - Parent with filter: blur makes child with backdrop-filter: blur disappear

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

[goljatpre]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:106.0) Gecko/20100101 Firefox/106.0
Firefox for Android

Steps to reproduce:

I have a parent div with filter: blur(..) css property and a child with backdrop-filter: blur(..) css property.

Minimal reproduction repository: https://github.com/dPreininger/firefox-bug-report

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:106.0) Gecko/20100101 Firefox/106.0

Actual results:

The child was not visible until backrop-filter was removed from the child.

In my repo, this is done on parent hover.

Expected results:

The child should be visible at all times.

Comment 1

[Mayank Bansal]

Attachment: Reporters Standalone testcase.html

Comment 2

[Mayank Bansal]

Attachment: Demonstration.mp4

Nightly Vs Chrome

Comment 3

[Jamie Nicol [:jnicol]]

Mozregression points to the commit initially enabling backdrop filter: bug 1578503.

Glenn, any ideas?

Comment 4

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

Set release status flags based on info from the regressing bug 1578503

Comment 5

[Glenn Watson [:gw]]

No immediate ideas, it will need further investigation.

Comment 6

[Dianna Smith [:diannaS]]

:gw any updates on the investigation?

Comment 7

[Glenn Watson [:gw]]

No, haven't had a chance to look at this yet.

Comment 8

[zeemeerman_ii]

I independently also found this bug.

Codepen: https://codepen.io/AmyLoriley/pen/QWVPqWp?editors=1100

HTML

<div class="container">
  <div class="pop-up"></div>
</div>

CSS

body{
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Cat_yawn_with_exposed_teeth_and_claws.jpg/2560px-Cat_yawn_with_exposed_teeth_and_claws.jpg")
}
.container{
background: rgba(0,0,0,0.5);
width: 100%;
height: 100px;
position: relative;
filter: blur(2px);
/* backdrop-filter: blur(10px); */
}
.pop-up{
display: none;
position: absolute;
top: 100px;
left: 0;
width: 100%;
height: 100px;
background: rgba(100,100,100,0.5);
backdrop-filter: blur(10px);
}
.container:hover .pop-up{
display: block;
}

Toying with the backdrop-filters and filter, I found the following to be true.

Parent — filter:blur(2px);	Parent — backdrop-filter: blur(10px);	Child — backdrop-filter: blur(10px);	Is Child visible?
✖️	✖️	✖️	✅
✖️	✖️	✔️	✅
✖️	✔️	✖️	✅
✖️	✔️	✔️	✅
✔️	✖️	✖️	✅
✔️	✖️	✔️	❌
✔️	✔️	✖️	✅
✔️	✔️	✔️	✅

Interestingly, Chromium-based browsers also have difficulty with this. In the case of those browsers, the child div is always shown, but the backdrop-blur is not always correctly applied.

Comment 9

[vitabramov89]

Reproduced this behavior here: https://codepen.io/darthvitalus/pen/xxeexQW?editors=1100
parent has filter: drop-shadow
child has backdrop-filter: blur
result: child is not visible
Both Chromium and Safari show child correctly

Comment 10

[vitabramov89]

Found workaround (updated codepen ^)
If apply backdrop-filter: drop-shadow to parent - child is rendered