如何跨浏览器一致地模糊（）？

Question

Firefox 和 Chrome 中模糊效果的渲染存在差异。

对于一些小值，例如

filter: blur(30px)

Chrome 和 Firefox 会产生几乎相同的高斯模糊。

但是对于像

filter: blur(200px)

这样的大值，这些浏览器有非常明显的差异。

以下是 4 个图像中的示例：（左为 FF，右为 Chrome）

（显示的网站是 https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function 我在开发工具中将滑块的最大值编辑为 200）

0px模糊：相同

30px 模糊：相同

100px 模糊：相同

200px 模糊：不同

看起来 Firefox 只在原始尺寸内应用模糊，而 Chrome 则扩大了模糊应用区域并从外到内泄漏“白色”。但这种观察可能是错误的。

我对SO的问题是“如何在跨浏览器中获得一致的模糊效果？”

Answer 1

Firefox 将 css 模糊滤镜限制为 100dp（设备像素）或 300px，具体取决于它是通过硬件还是软件渲染应用，这取决于用户的硬件。 这是因为高斯模糊效果对性能有影响。更多信息：https://bugzilla.mozilla.org/show_bug.cgi?id=1530810

Chrome 也有限制，我认为是 500px。

但是，如果您想超越该限制并忽略任何性能问题，您可以在画布元素内实现高斯模糊效果。例如通过此 WebGL 着色器：https://github.com/Jam3/glsl-fast-gaussian-blur 无论性能影响如何，这都会让您获得一致的外观。