<feGaussianBlur/> 在 safari 和移动浏览器中的图像上出现奇怪的人工制品

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”也应该是“color-interpolation-filters”）