iPhone设备上SVG运动模糊滤镜失效问题求助

问题描述 #

为图片滑动组件添加的运动模糊效果，在安卓设备及桌面网页端运行正常，但在iPhone设备上无法生效。当前使用多阶SVG高斯滤镜切换的方式实现动画效果。

可能原因 #

iOS上的Safari对隐藏状态（宽高设为0）的SVG滤镜动态切换支持存在兼容性问题，无法正确识别或应用滤镜的变化状态。

修复方案 #

方案1：优化SVG滤镜定义 #

调整SVG的隐藏方式，确保浏览器能正确解析滤镜，同时添加Safari兼容属性：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="0px" height="0px" viewBox="0 0 1366 768" xml:space="preserve" style="position: absolute; visibility: hidden;">
  <!-- Gaussian blur filter progression to animate -->
  <defs>
    <filter id="blur0" color-interpolation-filters="sRGB">
      <feGaussianBlur in="SourceGraphic" stdDeviation="0 0" />
    </filter>
    <filter id="blur1" color-interpolation-filters="sRGB">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5 0" />
    </filter>
    <filter id="blur2" color-interpolation-filters="sRGB">
      <feGaussianBlur in="SourceGraphic" stdDeviation="12 0" />
    </filter>
    <filter id="blur3" color-interpolation-filters="sRGB">
      <feGaussianBlur in="SourceGraphic" stdDeviation="20 0" />
    </filter>
    <filter id="blur4" color-interpolation-filters="sRGB">
      <feGaussianBlur in="SourceGraphic" stdDeviation="35 1" />
    </filter>
    <filter id="blur5" color-interpolation-filters="sRGB">
      <feGaussianBlur in="SourceGraphic" stdDeviation="50 1" />
    </filter>
  </defs>
</svg>

• 将width="0"改为width="0px"，避免解析歧义
• 添加style="position: absolute; visibility: hidden;"替代宽高0的隐藏方式，确保滤镜仍能被浏览器读取
• 给每个滤镜添加color-interpolation-filters="sRGB"，提升Safari下的渲染兼容性

方案2：改用CSS动画实现模糊过渡 #

如果SVG滤镜方案仍不生效，可替换为CSS滤镜动画，Safari对CSS滤镜的动画支持更稳定：

.slider div {
  transition: filter 0.1s linear;
  will-change: filter;
  transform: translateZ(0); /* 触发硬件加速 */
}

/* 对应不同滑动阶段的模糊状态 */
.slider div.blur-0 { filter: blur(0px); }
.slider div.blur-1 { filter: blur(5px); }
.slider div.blur-2 { filter: blur(12px); }
.slider div.blur-3 { filter: blur(20px); }
.slider div.blur-4 { filter: blur(35px); }
.slider div.blur-5 { filter: blur(50px); }

• 通过切换CSS类来实现不同模糊程度的过渡
• 添加will-change和transform: translateZ(0)强制开启硬件加速，确保动画流畅渲染

方案3：强制硬件加速 #

若使用原有SVG滤镜方案，可给滑动容器添加硬件加速属性，确保滤镜动画在Safari中正常触发：

.slider div {
  will-change: filter;
  transform: translateZ(0);
}

验证 #

修改后在iPhone的Safari浏览器中测试滑动效果，运动模糊应能正常生效。

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