嵌入似乎在Firefox中破坏了背景过滤器，但在Chrome中没有.这是一个bug还是可以在CSS中修复?

Question

编辑:等待某人的修复回复，我将假设这是一个bug。看起来它可能与https://bugzilla.mozilla.org/show_bug.cgi?id=1794432有关，尽管跟踪器上的线程很少，所以不清楚Mozilla是否确定它是一个bug。与那里的线程矛盾，在我的测试期间，似乎任何嵌入都会导致这个问题，并设置层。强制启用不能修复它。我把这个问题和一个bug追踪器的链接放在一起，以防有人因为遇到同样的问题而偶然发现这个问题。

我在一个网站上的粘性导航条使用背景滤镜模糊的背景。这种方法效果很好，但是对于嵌入的页面(iframe, object等)，当滚动接近嵌入时，Firefox中的过滤器似乎会失效。它似乎不是由于堆叠上下文(导航栏仍然在顶部)，但我在损失是什么原因造成的。在我提交错误报告之前，我想要得到输入，看看这是否是我的代码的问题，以及这里是否有人知道解决方案。我在下面包括了一个复制-在chrome中查看，行为是预期的;然而，在Firefox中，过滤器会在嵌入周围的元素上断开。我已经证实，在对象标签中嵌入pdf也会发生这种情况。我在下面包含了一个最小的复制代码，这里有一个JSFiddle的链接: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>

我在Firefox 107.0.1和Chrome 108.0.5359.73上测试了这个;Firefox在103版本中添加了对后台过滤器的支持(尽管我还没有在该版本或之前的版本中进行测试)。我尝试在嵌入周围添加包装器和z-index设置，使用::before伪元素来包含背景过滤器等等。到目前为止，我所做的一切都没有导致背景过滤器在firefox上像预期的那样运行。显然，我可以运行代码来检测是否有人正在使用Firefox，并将元素设置为完全不透明，但我希望尽可能避免查询useragent(功能检测不起作用，因为Firefox具有该功能)。如果有办法让这个在FF中正常工作，我想知道。

在有人将此标记为重复之前，我不认为这与chrome和firefox的z-index行为不同有关。当前的firefox在这方面模仿了chrome，没有使用固定定位，导航条仍然像预期的那样显示在其他元素的上方。

Answer 1

作为Firefox版本108背景过滤器的行为是工作的。补丁说明中没有任何内容表明这种行为已被直接解决，但它在不同版本之间发生变化的事实表明，这是一个由其他更改修复的错误(参见https://bugzilla.mozilla.org/show_bug.cgi?id=1794432查看与之相关的错误)。这很可能是一个bug。