Firefox中的条带工件模糊了CSS3过滤器属性的效果

Question

我正在使用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上，这看起来很棒并且没有条带，所以这似乎只发生在Windows（至少Vista）上。 Firefox在Windows上有一个同样糟糕的渐变实现 - 所以我怀疑这是由于他们使用的本机图形调用。您可以通过使用filterRes调低滤镜分辨率来消除特定图像中最差的条带，这样可以在模糊之前对图像进行下采样。<​​/ p>

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

似乎是一个好结果。缺点是现在看起来像MacOS上的像素化​​。

我已经尝试过添加噪点，置换贴图，甚至将多个不同的模糊合成在一起，以及CSS设置，如颜色插值滤镜和图像渲染，但没有任何修复它以及将其戳到下采样。< / p>