2

Edit: Pending a reply from someone with a fix, I'm going to assume this is a bug. It looks like it may be related to https://bugzilla.mozilla.org/show_bug.cgi?id=1794432, though the thread on the tracker is sparse, so it's unclear if Mozilla has determined it is a bug. Contradictory to the thread there, it appears that during my testing any embeds cause this problem, and setting layers.force-enabled does not fix it. I'm leaving the question up with a link to the bug tracker in case someone stumbles across this due to encountering the same issue.

I'm working on a site with a sticky navbar using backdrop-filter to blur the background. This works great, but on pages with an embed (iframe, object, etc.), the filter appears to break in Firefox as scrolling approaches the embed. It doesn't appear to be due to stacking contexts (the navbar remains on top), but I'm at a loss as to what is causing it. Before I file a bug report, I wanted to get input and see if this is a problem with my code, and if anyone here knows the solution. I've included a reproduction below -- viewed in chrome, behavior is as expected; viewed in Firefox, however, the filter breaks on elements surrounding the embed. I've confirmed this happens with a pdf embedded in an object tag as well. I've included the code for a minimum repro below, and there's a link to a JSFiddle here: https://jsfiddle.net/gamo2zy3/1/

.navbar {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 1;
  backdrop-filter: grayscale() saturate(180%) brightness(50%) blur(50px);
  border-bottom: 1px solid rgb(0, 0, 0);
  background-color: rgba(0, 255, 0, 0.1);
}

content-container {
  display: block;
  width: 500px;
}

div.takespace {
  height: 1000px;
}

img {
  width: 100%
}

.embedVideo-iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
}
<nav class="navbar">TEST TEXT</nav>
<content-container>
  <img src="https://w.wiki/64tg" />
  <div class="takespace"></div>
  <img src="https://w.wiki/64tg" />
  <iframe src="https://www.youtube.com/embed/B4Kn3djJMCE?rel=0" class="embedVideo-iframe"></iframe>
  <img src="https://w.wiki/64tg" />
  <div class="takespace"></div>
  <img src="https://w.wiki/64tg" />
  <div class="takespace"></div>
</content-container>

I've tested this on Firefox 107.0.1 and Chrome 108.0.5359.73; Firefox added support for backdrop-filter back in version 103 (though I haven't gone back and tested it in that or prior versions). I've tried adding wrappers and z-index settings surrounding the embeds, using a ::before pseudo-element to contain the backdrop-filter, and more. So far nothing I've done has caused the backdrop-filter to behave as expected on firefox. Obviously I can just run code to detect that someone is using Firefox and set the element to be fully opaque, but I'd like to avoid querying useragent if possible (feature detection wouldn't work, since Firefox has the feature). If there's a way to get this working properly in FF I'd like to know.

Before someone marks this as a duplicate, I do not believe this is related to z-index behaviour is different in chrome to firefox. Current firefox behavior mimics chrome in this aspect, fixed positioning is not used, and the navbar still shows up above other elements as expected.

ZTKlein
  • 31
  • 7

1 Answers1

0

As of Firefox version 108 backdrop filter behavior is working. Nothing in the patch notes suggests that this behavior was directly addressed, but the fact that it changed between versions suggests that it was a bug fixed by some other change (see https://bugzilla.mozilla.org/show_bug.cgi?id=1794432 for the bug it appears to be related to). It's very probable it was a bug.

ZTKlein
  • 31
  • 7