safari和移动浏览器中图像上带有<feGaussianBlur/>的奇怪工艺品

Question

我目前正在模糊图像，并使用这些作为背景时，一个图像被包含。我使用下面的svg过滤器，并使用feGaussianBlur和feColorMatrix分两个步骤展开过滤器。这在Chrome中呈现得很完美，但在Safari和移动浏览器中，我看到了奇怪的手工艺品。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <filter
      id="blurry"
      width="150%"
      height="150%"
      x="-25%"
      y="-25%"
      colorInterpolationFilters="sRGB"
    >
      <feGaussianBlur stdDeviation="45" />
      <feColorMatrix
        type="matrix"
        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 0 0 0 10 0"
      />
      <feGaussianBlur stdDeviation="45" />
      <feColorMatrix
        type="matrix"
        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0 0 0 0 10 0"
      />
      <feComposite in2="SourceGraphic" operator="in" />
    </filter>
</svg>

然后在我的CSS中使用：

-webkit-filter: url('#blurry');
        filter: url('#blurry');

预期结果(在桌面上)：

​

​

结果我得到：

​

​

它显示出这些奇怪的缺口。

我注意到了一些事情：

改变过滤器大小和位置的

• 在某些图像上不工作
• --我没有看到这些
• 过滤器stdDeviation不工作

这和我的图像分辨率有关系吗？

Answer 1

这些都是大模糊-所以Safari可能会降低过滤分辨率。虽然它是不推荐的，我认为从Firefox和Chrome中删除了它--您可以尝试在过滤器元素中设置一个显式的filterRes，因为Safari仍然支持它。

( "colorInterpolationFilters“也应该是”彩色插值-过滤器“)