Bug 280531 – `backdrop-filter` is applied incorrectly to child element

• Status: NEW
• Component: CSS

[Holger Seelig]

Created attachment 472709 [details]
`backdrop-filter` is applied incorrectly to child element

There are two elements parent and child with a backdrop-filter, child has position "absolute", but only parent will have a backdrop-filter. 

Affects Safari on macOS.

As far as I know only Firefox will also apply the backdrop-filter to the child.

[Holger Seelig]

Correction: only parent renders a backdrop-filter.

[Holger Seelig]

Created attachment 472710 [details]
Firefox rendering

[Holger Seelig]

Created attachment 472711 [details]
Safari rendering

[Karl Dubost]

Chrome and Safari behave the same way.
Firefox is different.

.blurred {
   -webkit-backdrop-filter: blur(3px) invert(1);
   backdrop-filter: blur(3px) invert(1);
}

.parent, .child {
   width: 200px;
   height: 50px;
   border: 1px solid red;
}

.parent {
   position: relative;
}

.child {
   position: absolute;
   left: 210px;
}

<div class="parent blurred">
   <div class="child blurred">child</div>
   parent
</div>

[Radar WebKit Bug Importer]

<rdar://problem/137299535>