使用 SVG 与 Safari 平铺的 CSS 过滤器

Question

我正在尝试使用 SVG 过滤器在 html 元素上创建一种苦恼的模式，该过滤器通过 CSS 使用过滤器属性应用。

我找到了一些示例，并根据我的喜好对其进行了调整，在我使用 Safari 进行测试之前，一切都很好。由于某种原因，它会随机平铺效果，尽管我尽了最大努力，但我找不到解决方法。

我发现了一些暗示类似问题的帖子，但没有完全相同的。任何人都可以确认这是一个错误还是我做错了什么！

这是我的过滤器：

<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>

基本 HTML 是：

.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%;
}

我在这里创建了一个示例代码笔：

https://codepen.io/antonyjsmith/pen/WNJoKMW

在 Chrome 和 Firefox 上运行良好，在 Safari 上运行奇怪的图块。

任何帮助或指示将不胜感激。

Answer 1

您找到解决方案了吗？我也遇到同样的问题