Safari下SVG Turbulence滤镜渲染出现瓦片拼接异常兼容问题

问题现象 #

给页面元素应用SVG feTurbulence + feDisplacementMap 实现水波扰动效果时，Firefox、Chrome浏览器显示正常：

Safari浏览器下出现渲染异常，图像被拆分为多个瓦片块拼接显示：

移除元素上的CSS动画、transform 属性后问题仍存在。

问题复现代码 #

HTML部分 #

<svg>
     <filter id="turbulence" x="0" y="0" width="100%" height="100%">
            <feTurbulence
              id="sea-filter"
              numOctaves="3"
              seed="2"
              baseFrequency="0.02 0.05"
            ></feTurbulence>
            <feDisplacementMap
              scale="20"
              in="SourceGraphic"
            ></feDisplacementMap>
            <animate
              xlinkHref="#sea-filter"
              attributeName="baseFrequency"
              dur="120s"
              keyTimes="0;0.5;1"
              values="0.02 0.06;0.04 0.08;0.02 0.06"
              repeatCount="indefinite"
            />
      </filter>
</svg>

<div className={styles.sea} style={{ background: `url(${sea})` }}></div>

CSS部分 #

.sea {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100%;
  background-image: url("../../assets/images/Hero/Sea/sea.webp");
  background-size: cover;
  filter: url("#turbulence");
  animation: floating 80s ease forwards infinite;
  transform: translateY(0) scale(1.25);
}

问题原因 #

这个问题是Safari对SVG滤镜的渲染逻辑bug导致的：

1. Safari默认不会为位移类滤镜自动扩展渲染区域，当滤镜效果超出元素本身的100%宽高范围时，会按照默认瓦片尺寸分块计算渲染，出现拼接缝隙
2. Safari对滤镜节点的隐式输入源解析存在兼容问题，没有显式绑定输入输出的滤镜链容易出现渲染逻辑错误
3. 定义滤镜的SVG元素如果参与布局渲染，会干扰Safari对滤镜作用区域的计算

修复方案 #

按以下步骤调整代码即可解决：

• 调整滤镜的作用区域，预留足够的冗余空间覆盖位移范围，冗余尺寸需要大于等于feDisplacementMap的scale值对应的位移占比：

  <!-- 原x="0" y="0" width="100%" height="100%" 替换为下方配置 -->
  <filter id="turbulence" x="-25%" y="-25%" width="150%" height="150%">
  

• 显式绑定滤镜链的输入输出关系，不要依赖浏览器的隐式节点顺序解析：

  <feTurbulence
    id="sea-filter"
    result="turbulenceMap" <!-- 给湍流节点添加输出标识 -->
    numOctaves="3"
    seed="2"
    baseFrequency="0.02 0.05"
  ></feTurbulence>
  <feDisplacementMap
    scale="20"
    in="SourceGraphic"
    in2="turbulenceMap" <!-- 显式指定位移的映射源为湍流节点输出 -->
  ></feDisplacementMap>
  

• 隐藏定义滤镜的SVG元素，避免其参与布局干扰渲染计算：

  svg {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
  }
  

• 给应用滤镜的元素添加GPU层触发属性，强制Safari将整个元素作为独立渲染层绘制，避免分块渲染：

  .sea {
    /* 原有其他样式保留 */
    -webkit-transform: translateZ(0) translateY(0) scale(1.25);
    transform: translateZ(0) translateY(0) scale(1.25);
  }
  

如果以上调整后仍偶发瓦片问题，可以将背景图移入SVG内部用<image>标签加载，直接在SVG内部完成滤镜应用，避免通过CSS filter跨元素引用滤镜，能彻底规避Safari的跨元素滤镜渲染bug。

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