Search code examples
htmlcssgoogle-chromefirefoxcross-browser

How to blur() consistently cross browsers?

There is a difference in rendering of blur effect in Firefox and Chrome.

For some small value like filter: blur(30px) Chrome and Firefox produce nearly the same Gaussian blur.

But for a big value like filter: blur(200px) those browsers have a very noticeable difference.

Here is an example of that in 4 images: (FF left, Chrome right)

(Website shown is https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function I edited maximum of slider to be 200 in devtools)

0px blur: same

zero blur

30px blur: same

thirty blur

100px blur: same-ish

hundred blur

200px blur: different

two hundred blur

It looks as if Firefox applies blur only inside the original dimensions, whereas Chrome enlarges the blur application area and leaks the "whiteness" from outside to inside. That observation may be wrong though.

My question to SO is "How can I get a consistent blur effect cross browsers?"

Solution

  • Firefox limits the css blur filter to 100dp (device pixels) or 300px depending on if it is applied via hardware or software rendering which depends on the hardware of the user. This is because of the performance impact the gaussian blur effect has. More info: https://bugzilla.mozilla.org/show_bug.cgi?id=1530810

    Chrome has a limit as well, I think it is 500px.

    However if you want to go over that limit and ignore any performance problems you can implement a gaussian blur effect within a canvas element. Via for example this WebGL shader: https://github.com/Jam3/glsl-fast-gaussian-blur That'll get you a consisent look regardless of the performance impact.