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

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

问题：我正在开发我的项目 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 ！