如何 blur() 始终跨浏览器？
How to blur() consistently cross browsers?
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 提出的问题是“如何在跨浏览器中获得一致的模糊效果？”
Firefox 将 css 模糊滤镜限制为 100px 或 300px，具体取决于它是通过硬件还是软件渲染应用，这取决于用户的硬件。
这是因为高斯模糊效果对性能有影响。更多信息：https://bugzilla.mozilla.org/show_bug.cgi?id=1530810
Chrome也有限制，我觉得是500px。
但是，如果您想超越该限制并忽略任何性能问题，您可以在 canvas 元素内实现高斯模糊效果。例如通过这个 WebGL 着色器：https://github.com/Jam3/glsl-fast-gaussian-blur
无论性能影响如何，这都会让您获得一致的外观。
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 提出的问题是“如何在跨浏览器中获得一致的模糊效果？”
Firefox 将 css 模糊滤镜限制为 100px 或 300px，具体取决于它是通过硬件还是软件渲染应用，这取决于用户的硬件。 这是因为高斯模糊效果对性能有影响。更多信息：https://bugzilla.mozilla.org/show_bug.cgi?id=1530810
Chrome也有限制，我觉得是500px。
但是，如果您想超越该限制并忽略任何性能问题，您可以在 canvas 元素内实现高斯模糊效果。例如通过这个 WebGL 着色器：https://github.com/Jam3/glsl-fast-gaussian-blur 无论性能影响如何，这都会让您获得一致的外观。