I’m dealing with a website with a sticky navbar utilizing backdrop-filter to obscure the history. This functions excellent, yet on web pages with an installed (iframe, things, and so on), the filter shows up to barge in Firefox as scrolling methods the installed. It does not seem because of piling contexts (the navbar stays on the top), yet I go to a loss regarding what is triggering it. Prior to I submit an insect record, I wished to obtain input as well as see if this is a trouble with my code, as well as if any individual below recognizes the service. I have actually consisted of a recreation below– checked out in chrome, habits is as anticipated; checked out in Firefox, nevertheless, the filter breaks on components bordering the installed. I have actually verified this occurs with a pdf installed in an item tag also. I have actually consisted of the code for a minimal repro listed below, as well as there’s a web link to a JSFiddle below: https://jsfiddle.net/gamo2zy3/1/
navbar {
setting: sticky;
top: 0;
left: 0;
size: 100%;.
elevation: 100px;.
z-index: 1;.
backdrop-filter: grayscale() fill( 180%) illumination( 50%) blur( 50px);.
border-bottom: 1px strong rgb( 0, 0, 0);.
background-color: rgba( 0, 255, 0, 0.1);.
}
content-container {
screen: block;.
size: 500px;.
}
div.takespace {
elevation: 1000px;.
}
img {
size: 100%.
}
. embedVideo-iframe {
aspect-ratio: 16/ 9;.
size: 100%;.
elevation: 100%;.
} << nav course=" navbar">> EXAMINATION MESSAGE<.
<< content-container>>.
<< img src=" https://w.wiki/64tg"/>>.
<< div course=" takespace"><> < img src=" https://w.wiki/64tg"/>>.
<< iframe src=" https://www.youtube.com/embed/B4Kn3djJMCE?rel=0" course=" embedVideo-iframe"><> < img src=" https://w.wiki/64tg"/>>.
<< div course=" takespace"><> < img src=" https://w.wiki/64tg"/>>.
<< div course=" takespace"><> I have actually evaluated this on Firefox 107.0.1 as well as Chrome 108.0.5359.73; Firefox included assistance for backdrop-filter back in variation 103 (though I have not returned as well as evaluated it because or prior variations). I have actually attempted including wrappers as well as z-index setups bordering the embeds, utilizing a:: prior to pseudo-element to consist of the backdrop-filter, as well as extra. Up until now absolutely nothing I have actually done has actually triggered the backdrop-filter to act as anticipated on firefox. Undoubtedly I can simply run code to identify that a person is utilizing Firefox as well as established the aspect to be completely nontransparent, yet I want to prevent quizing useragent when possible (attribute discovery would not function, because Firefox has the attribute). If there’s a method to obtain this functioning effectively in FF I want to understand.
Prior to a person marks this as a replicate, I do not think this relates to z-index behavior is various in chrome to firefox Existing firefox habits resembles chrome in this element, taken care of positioning is not made use of, as well as the navbar still turns up over various other components as anticipated.
