使用SVG CSS Filter在Safari中出现异常平铺问题求助

我用CSS的filter属性结合SVG滤镜给HTML元素做磨损风格效果，在Chrome和Firefox里显示正常，但Safari里滤镜会出现随机平铺的问题，想确认这是浏览器Bug还是操作失误。

我的SVG滤镜代码： #

<svg>
    <filter id="squiggle">
        <feTurbulence baseFrequency="0.1" numOctaves="2" seed="4" type="fractalNoise" stitchTiles="stitch" result="result1" />
        <feDisplacementMap in2="result1" scale="99" result="result2" xChannelSelector="R" in="SourceGraphic" />
        <feComposite in2="result2" in="SourceGraphic" operator="atop" result="fbSourceGraphic" />
    </filter>
</svg>

对应的CSS代码： #

.container {
  padding: 3rem;
  margin-left: auto;
  margin-right: auto;
  background-color: grey;
  background-size: cover;
  font-size: 20px;
  filter: url("#squiggle");
  position: absolute;
  width: 90vw;
  height: 80%;
}

原因分析 #

这是Safari对SVG滤镜中feTurbulence的stitchTiles="stitch"属性支持存在兼容性Bug：当滤镜应用到大尺寸元素时，Safari没有正确处理噪点纹理的平铺拼接逻辑，导致出现随机断裂的视觉效果。Chrome和Firefox则正确实现了该属性的拼接行为。

修复方案 #

方案1：指定滤镜的作用范围（推荐）

给SVG滤镜添加filterUnits="userSpaceOnUse"，并明确设置x、y、width、height属性，让滤镜范围完全覆盖目标元素：

<svg width="0" height="0">
    <filter id="squiggle" filterUnits="userSpaceOnUse" x="0" y="0" width="100vw" height="100vh">
        <feTurbulence baseFrequency="0.1" numOctaves="2" seed="4" type="fractalNoise" stitchTiles="stitch" result="result1" />
        <feDisplacementMap in2="result1" scale="99" result="result2" xChannelSelector="R" in="SourceGraphic" />
        <feComposite in2="result2" in="SourceGraphic" operator="atop" result="fbSourceGraphic" />
    </filter>
</svg>

同时把SVG的宽高设为0，避免占用页面空间。

方案2：动态适配元素尺寸

如果目标元素尺寸会动态变化，可以通过JS实时更新滤镜的width和height，确保滤镜范围始终匹配元素大小：

const updateFilterSize = () => {
  const container = document.querySelector('.container');
  const filter = document.querySelector('#squiggle');
  const rect = container.getBoundingClientRect();
  filter.setAttribute('width', rect.width);
  filter.setAttribute('height', rect.height);
};

// 初始化时执行一次，监听窗口变化时更新
updateFilterSize();
window.addEventListener('resize', updateFilterSize);

方案3：调整噪点参数（妥协方案）

如果上述方案无法解决，可以尝试降低feTurbulence的baseFrequency值（比如改为0.05），减小噪点密度，能在一定程度上弱化平铺异常的视觉感受，但会改变最终的磨损风格，需要根据需求调整。

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