Firefox中Embeds导致backdrop-filter失效？求CSS修复方案

编辑说明 #

等待修复方案期间，暂将此判定为Bug。该问题疑似与Mozilla Bugzilla编号1794432的问题相关，但追踪信息有限，不确定Mozilla是否已将其正式标记为Bug。与该线程内容不同的是，我的测试显示所有embed元素都会触发此问题，且设置layers.force-enabled无法修复。保留此问题并附上Bug追踪编号，供遇到相同问题的用户参考。

问题描述 #

我正在开发的网站带有一个粘性导航栏，使用backdrop-filter实现背景模糊效果，在Chrome中表现正常，但在Firefox里，当页面滚动到iframe、object这类embed元素附近时，滤镜效果会失效。经排查，导航栏仍保持在顶层，说明问题与堆叠上下文无关，但无法确定具体原因。在提交Bug报告前，希望确认是否是代码问题，并寻求可行的解决方案。

嵌入PDF的object标签也会出现同样问题，可通过最小复现代码重现。

最小复现代码 #

CSS代码 #

.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%;
}

HTML代码 #

<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版本起支持backdrop-filter
• 尝试过的解决方法：为embed元素添加包裹容器、调整z-index、使用::before伪元素承载backdrop-filter，均无法让Firefox中的滤镜正常工作

我不想通过检测用户代理来设置元素为完全不透明，希望找到无需UA检测的解决方案。

补充说明 #

请勿将此问题标记为重复，它与“Chrome和Firefox中z-index行为差异”的问题无关。当前Firefox在该方面的行为与Chrome一致，导航栏未使用固定定位，且始终正确显示在其他元素上方。

内容的提问来源于stack exchange，提问作者ZTKlein