如何 blur() 始终如一地跨浏览器？答案

【问题标题】：How to blur() consistently cross browsers?如何 blur() 始终如一地跨浏览器？
【发布时间】：2021-12-29 18:19:01
【问题描述】：

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

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

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

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

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

0px 模糊：相同

30px 模糊：相同

100px 模糊：相同

200px 模糊：不同

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

我对 SO 的问题是“我怎样才能获得一致的跨浏览器模糊效果？”

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：