使用SVG feTurbulence作为过滤器会导致Safari中出现奇怪的渲染问题

Question

我一直在使用SVG和分形噪声处理css中的云，但在Safari13中渲染的输出充满了毛刺(最新的测试时)。这方面的一个例子可以在以下代码笔中看到：

https://codepen.io/beauhaus/pen/315327cfbb84e1fca1057d851dec8fde

<svg width="0" height="0"> 
    <filter id="filter">
      <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" />
      <feDisplacementMap in="SourceGraphic" scale="180" />
    </filter>
</svg>

如果你在Safari中调整预览UI的大小，你会看到云之间有奇怪的渲染线。

Answer 1

罗伯特是对的，你应该report this bug。

但是，似乎有一个简单的解决方法：

强迫你的过滤元素有它自己的层显然会使bug消失：(只用transform测试，也许我的解释是错误的)。

​

body {
  width: 100vw;
  height: 100vw;
  background: linear-gradient(165deg, #527785 0%, #7FB4C7 100%);
  padding: 1%;
  overflow: hidden;
}

#cloud-circle {
    width: 500px;
    height: 275px;
    border-radius: 50%;
    filter: url(#filter);
    box-shadow: 400px 400px 60px 0px #fff;
    position: absolute;
    top: -320px;
    left: -320px;
    /* Safari workaround */
    transform: translateZ(0);
}

<div id="cloud-circle"></div>
  <svg width="0" height="0"> 
    <filter id="filter">
      <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" />
      <feDisplacementMap in="SourceGraphic" scale="180" />
    </filter>
</svg>
</div>

​