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

Question

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

对于像 Chrome 和 Firefox 这样的小值filter: blur(30px)，会产生几乎相同的高斯模糊。

但对于像这些浏览器这样的大值来说，filter: blur(200px)有一个非常明显的差异。

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

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

0px 模糊：相同

30px 模糊：相同

100px 模糊：相同

200px 模糊：不同

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

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

Answer 1

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

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

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