Question

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

Answer 1

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.