如何在各浏览器中实现均匀一致的backdrop-filter模糊效果？

使用backdrop-filter: blur()实现模糊背景时，不同浏览器的渲染效果差异明显：Safari的模糊最均匀，Chrome次之，Firefox的边缘模糊不均，在滚动场景（比如头部导航）中，这种不均会导致视觉闪烁，体验很差。

下面是几个能让各浏览器都接近Safari均匀模糊效果的方案：

方案1：内边距+溢出隐藏裁剪边缘不均区域 #

模糊效果的不均匀主要集中在容器边缘，通过给模糊容器添加与模糊半径等值的内边距，再用overflow: hidden裁剪掉边缘的过渡区域，就能让显示出的模糊效果更均匀。

修改后的CSS：

.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;
  /* 关键新增代码 */
  padding: 10px; /* 数值与blur半径一致 */
  box-sizing: border-box;
  overflow: hidden;
}

方案2：伪元素放大模糊区域再裁剪 #

用伪元素创建一个比容器大一圈的模糊层，放在容器下方，再通过容器的overflow: hidden裁剪，让模糊过渡更自然，避免边缘不均。

CSS代码：

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

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

.blur::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  backdrop-filter: blur(10px);
  z-index: -1;
}

方案3：调整模糊半径与容器尺寸比例 #

如果容器尺寸过小，而模糊半径太大，也容易出现边缘不均。可以适当减小模糊半径，或者增大容器的实际显示尺寸，给模糊效果足够的过渡空间，也能改善Firefox的渲染表现。

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