如何获得均匀的背景虚化效果？

Question

应用

backdrop-filter

blur

时，不同浏览器之间的结果一致性不同：

从左到右：Safari、Chrome、Firefox

就统一性而言，Safari 表现最好，其次是 Chrome 和 Firefox。我不确定为什么浏览器之间存在如此明显的差异，但我希望像 Safari 一样在所有浏览器中获得更统一的效果。

我的用例是这样的：我使用模糊的标题，当滚动时，例如文本，不均匀的效果，尤其是在 Firefox 中，导致标题边缘闪烁，看起来很奇怪。

这是用于生成图像的代码（添加边框）：

.box {
  top:10px;
  left:10px;
  position: absolute;
  border: 5px solid red;
  width: 50px;
  height: 50px;
}

.blur {
  top:10px;
  left:10px;
  position: absolute;
  backdrop-filter: blur(10px);
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div class="box">
</div>

<div class="blur">
</div>

Answer 1

考虑@G-Cyrillus 的负边距建议，让我想出了一个使用包装器的可能解决方案。我不会称其为完美，但也许它已经尽善尽美了？

.box {
  top: 10px;
  left: 10px;
  position: absolute;
  border: 5px solid red;
  width: 50px;
  height: 50px;
}

.outer {
  top: 10px;
  left: 10px;
  position: absolute;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 1px solid;
}

.blur {
  top: -10px;
  left: -10px;
  position: absolute;
  backdrop-filter: blur(10px);
  width: 110px;
  height: 110px;
}

<div class="box">
</div>

<div class="outer">
  <div class="blur">
  </div>
</div>