Html SVG 过滤器湍流在 safari 上的渲染效果不佳

我正在try 在我的网站上的图像上应用svg"湍流"过滤器.

但在safari上看起来很可怕:

似乎Safari正在将我的图像"拆分"为瓷砖...你有什么 idea 吗？

这是我的代码:

<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);
}

我试图删除我的动画和变换，但不起作用...

提前感谢！