Firefox中的绑定工件模糊CSS3滤镜属性的效果 [英] Banding artifacts in Firefox blur effect of CSS3 filter property

问题描述

我使用的是CSS3过滤器属性，并试图在Chrome和Firefox中获得类似的结果，不过每个浏览器的语法和实现都不相同。

在Chrome中，我是使用下面的CSS来对图像应用模糊效果：

＃chrome-blur {
-webkit-filter：blur（10px）;



$ b在Firefox中我使用下面的CSS来应用模糊效果，一个SVG过滤器在页面的主体。

 ＃firefox-blur {
 filter：url（#blur）; 
} 
  

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

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

解决方案<在MacOS上，这看起来很棒，没有条带，所以这似乎只发生在Windows（Vista至少）。 Firefox在Windows上有一个同样不好的梯度实现 - 所以我怀疑这是由于他们使用的任何本地图形调用。您可以通过filterResult过滤器的分辨率来清除特定图像中最糟糕的条纹，filterres具有在对图像进行模糊处理之前对图像进行下采样的效果。

 < filter id =blurfilterRes =60> 
  

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

我尝试添加噪点，位移贴图，甚至将多个不同的模糊合并在一起，以及CSS设置，如颜色插值滤镜和图像渲染。没有任何东西可以修复它，也可以戳穿它来减少样本。

I am using the CSS3 filter property and trying to get similar results in Chrome and Firefox, though the syntax and implementation differ in each browser.

In Chrome I am using the following CSS to apply a blur effect to an image:

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

In Firefox I am using the following CSS to apply the blur effect, which references an SVG filter in the body of the page.

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

This all works fine, however the Firefox version displays banding in the blurred image. I am wondering if my SVG filter needs work or if there is an issue with the algorithm in Firefox?

Full example at http://codepen.io/vcurd/pen/pDwqr

解决方案

On MacOS, this looks great and there is no banding, so this seems to only occur on Windows (Vista at least). Firefox has an equally bad gradient implementation on Windows - so I suspect this is due to whatever native graphics calls they're using. You can get rid of the worst of the banding in your specific image by dialing down the filter resolution with filterRes which has the effect of downsampling the image before blurring it.

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

Seems to be a good result. The downside is that this now looks pixelated on MacOS.

I've experimented with adding noise, a displacementmap, even compositing multiple different blurs together, as well as CSS settings like color-interpolation-filters and image-rendering, but nothing fixes it as well as poking it to downsample.

这篇关于Firefox中的绑定工件模糊CSS3滤镜属性的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！