在Firefox中的带状伪影模糊CSS3过滤器性能的影响(Banding artifacts in

我现在用的是CSS3筛选器属性，并试图让Chrome和Firefox类似的结果，虽然语法和实施在每个浏览器是不同的。

在Chrome中我使用了下面的CSS应用模糊效果的图像：

#chrome-blur {
    -webkit-filter: blur(10px);
}

在Firefox中我使用了下面的CSS应用模糊效果，它引用的SVG滤镜在页面的主体。

#firefox-blur {
    filter: url(#blur);
}

这一切工作正常，但Firefox的版本显示模糊图像中产生带宽。 我想知道如果我的SVG过滤器需要工作或如果没有与Firefox中的算法问题？

在完整的例子http://codepen.io/vcurd/pen/pDwqr

Answer 1:

在MacOS上，这看起来不错，也没有带，所以这似乎只（至少Vista）的Windows上出现。 Firefox已经在Windows中同样糟糕梯度实现 - 让我怀疑这是由于任何原生图形调用他们使用。 您可以通过拨打下过滤器分辨率filterRes具有模糊之前下采样图像的效果摆脱最严重的特定图像的绑扎。

<filter id="blur" filterRes="60">

似乎是一个不错的结果。 缺点是，这个现在看起来在MacOS像素化。

我已经尝试了加噪，一displacementmap，甚至合成多个不同的模糊在一起，以及CSS设置，如色彩插值滤波器和图像渲染，但没有修复它，以及它戳下采样。

文章来源: Banding artifacts in Firefox blur effect of CSS3 filter property