iOS 17背景显示异常：CSS filter: blur()属性失效求替代方案

当iOS 17.0.0里filter: blur()和-webkit-filter: blur()无法正常工作时，可以尝试以下几种替代方法实现模糊效果：

方法一：使用SVG滤镜 #

SVG滤镜在iOS上兼容性稳定，可直接应用到目标元素：

先定义SVG滤镜（可放在HTML任意位置）：

<svg width="0" height="0" viewBox="0 0 0 0">
  <defs>
    <filter id="svg-blur">
      <feGaussianBlur stdDeviation="84" />
    </filter>
  </defs>
</svg>

再在CSS中引用该滤镜：

.loader__background {
  background-color: red;
  filter: url(#svg-blur);
  -webkit-filter: url(#svg-blur);
  z-index: 1;
}

方法二：伪元素+backdrop-filter模拟扩散模糊 #

针对纯色背景的大模糊扩散需求，可通过伪元素放大后应用模糊：

.loader__background {
  position: relative;
  background-color: transparent;
  z-index: 1;
}

.loader__background::before {
  content: "";
  position: absolute;
  top: -42px;
  left: -42px;
  right: -42px;
  bottom: -42px;
  background-color: red;
  backdrop-filter: blur(84px);
  -webkit-backdrop-filter: blur(84px);
  z-index: -1;
}

注：通过缩小原元素范围，让伪元素放大后模糊，模拟原blur(84px)的扩散效果。

方法三：box-shadow模拟纯色模糊扩散 #

如果只需要视觉上的扩散晕染效果，可用多层大半径阴影模拟：

.loader__background {
  background-color: red;
  box-shadow: 
    0 0 84px 84px rgba(255, 0, 0, 0.8),
    0 0 120px 120px rgba(255, 0, 0, 0.6),
    0 0 160px 160px rgba(255, 0, 0, 0.4);
  z-index: 1;
}

该方法适合不需要精确模糊参数，仅需扩散视觉效果的场景。

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