如果您的 CSS 模糊或背景滤镜效果在 Chrome 中显示异常，请检查您的扩展程序（特别是 Glarity）。

[fayra]

我想分享一个发现，或许能帮助你避免我最近遇到的一些调试陷阱。

问题：我正在开发我的项目 Square Face Generator 的主页，并尝试使用 Tailwind CSS 实现一种流行的“SaaS 风格”的背景模糊效果（特别是对于使用 blur-[120px]、rounded-full 和 mix-blend-screen 的大元素）。

Safari/Firefox：渲染完美，具有柔和的漫射光效果。

Chrome （在我的电脑上）：渲染成一个清晰的实心圆。看起来 blur 属性被裁剪或完全忽略了。

调查：我最初认为这是 Blink 和 WebKit 渲染引擎之间的典型差异。我尝试了：

强制 GPU 加速（ transform: translateZ(0)）。

用 SVG 替换 CSS blur 。

怀疑是操作系统问题（ Windows 和 Mac 的颜色配置文件不同）。

添加了 will-change 属性。

但这些方法都没用。罪魁祸首最终是：我在同事干净的 Chrome 浏览器配置文件中测试了网站，一切正常。逐一检查每个扩展程序后，我找到了问题所在：Glarity （一款 AI 内容摘要扩展程序）。

看来这个扩展程序会向页面注入内容/样式，破坏页面堆叠上下文，或者干扰诸如 blur 和 mix-blend-mode 之类的大型 CSS 滤镜。

经验教训：如果你遇到看似不可能的 CSS 渲染错误，并且这些错误只在 Chrome 浏览器中出现，请立即在隐身模式（或访客配置文件）下进行测试。千万不要像我一样，在检查插件之前就重写整个后端 CSS ！

[94]

还是踩坑经验少了 😂 其实在出现只有某一个浏览器有问题的时候首先就该考虑插件问题了，虽然 AI 插件影响真的很难联想到。

然后最好可以配一下图？不太容易理解出现异常的状态。简单从文字描述来看是 filter 或者 backdrop-filter 属性没生效（应用错误）的情况？

[fayra]

@94 确实，长经验了。就是 backdrop-filter 属性在特定 AI 插件开启时失效了，背景完全没有模糊效果。当时发帖的时候没找到可以放图片的地方，以为不能放图片，就没放了😂

[xiyuesaves]

2025 年了居然还在用 flash 吗

[94]

@fayra #2 ，一般就是 A 浏览器有问题，到 B 浏览器看一眼。或者到 https://caniuse.com/ 中看一下兼容性。如果没有问题，就要用隐私模式去排除插件的问题了。
很早很早的时候用了 AdBlock 插件，然后有一个 className 是以 ad 开头的元素，测试的时候整个元素消失了😱，当时调试了好久……

-----

至于插图，主贴里面可以直接用 Markdown 格式插入图片。
👇 回贴里面可以用这样的方式，V 站的 /faq 中也有提到。

[fayra]

@94 好滴，有学到了，感谢💗

[AV1]

调试网页可以考虑在无痕模式进行，Chrome 的无痕模式默认是禁用所有扩展的。