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

【问题标题】：Using SVG feTurbulence as a filter causes odd rendering issues in Safari使用 SVG feTurbulence 作为过滤器会导致 Safari 出现奇怪的渲染问题
【发布时间】：2020-02-05 21:49:34
【问题描述】：

我一直在使用 SVG 和分形噪声在 css 中玩弄云，但渲染的输出在 Safari 13 中充满了故障（测试时最新）。可以在以下代码笔中看到一个示例：

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 的大小，您会看到云之间有奇怪的渲染线。

【问题讨论】：

您应该向webkit bugtracker报告错误

标签： css svg safari

【解决方案1】：

罗伯特是对的，你应该report this 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>

【讨论】：

啊，我明白了，是的，这很有效 - 非常感谢。我会继续报告它（如果还没有的话）