backdrop-filter 不支持 transition 动画，监听 transitionend 无效；应使用 opacity + 预设 backdrop-filter 实现淡入，Safari 需控制 blur 值并避免 overflow 容器直接应用。
backdrop-filter 本身不能被 transition 动画监听
直接写 transition: backdrop-filter 0.3s 是无效的——浏览器根本不会触发 transitionend 事件，无论你监听 transitionend、webkitTransitionEnd 还是其他变体。这不是兼容性问题，而是规范层面的限制：backdrop-filter 属于“非可动画 CSS 属性”，它不参与 transition 流程。
常见错误现象包括：JS 里加了监听但完全没响应；开发者反复检查拼写、前缀、事件名，最后发现属性压根就不走过渡管线。
正确做法只有两类：
- 用
opacity或visibility的过渡来“模拟”淡入，视觉上足够可信 - 若必须让模糊值变化（比如从
blur(0px)到blur(10px)），得靠 CSS 自定义属性 +@property（仅 Chromium 115+ 支持），且需手动声明动画类型
用 opacity + backdrop-filter 实现可靠淡入
这是目前最稳妥、兼容性最好、性能开销最低的方案。原理很简单：元素初始为 opacity: 0 且已带完整 backdrop-filter 和半透明背景，再通过 opacity 过渡显形。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 必须提前设好
backdrop-filter: blur(10px)和background-color: rgba(255,255,255,0.25)，否则淡入过程会先闪出实色块 - 避免用
display: none切换，它会中断 backdrop-filter 渲染上下文，Safari 下易出现白屏或重绘延迟 - 推荐搭配
transform: scale(0.99)触发硬件加速层，减少 opacity 过渡时的重绘抖动（尤其在 macOS Safari 上）
示例代码：
.glass-fade {
opacity: 0;
background-color: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transform: scale(0.99);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.glass-fade.show {
opacity: 1;
transform: scale(1);
}
Safari 下毛玻璃淡入时内容闪烁或失真
这是真实存在的渲染缺陷，集中在 macOS Monterey 及更早版本、iOS 15.4 之前，表现为文字锯齿、背景撕裂、甚至短暂全黑。根源是 Safari 对 backdrop-filter + opacity 混合渲染的合成策略不稳定。
缓解措施：
- 把模糊值控制在
blur(4px)–blur(8px)区间，高模糊半径加剧问题 - 避免在
overflow-y: auto容器上直接应用淡入效果，改用固定定位的蒙层覆盖 - 对文字内容加
-webkit-font-smoothing: subpixel-antialiased（仅限 Safari），能小幅改善锯齿 - 不依赖
will-change: backdrop-filter，它在 Safari 中反而可能触发更多重绘
需要动态调节模糊强度？别信媒体查询
CSS 媒体查询无法响应 blur() 的数值变化，blur(10px) 在 @media (prefers-reduced-motion: reduce) 里也不会自动降为 blur(2px)。想实现响应式模糊，只能靠 JS。
可行路径：
- 用
window.matchMedia监听系统偏好，切换预设 class（如.glass-low-blur/.glass-high-blur） - 在滚动或视口进入时，用
getBoundingClientRect()计算距离，动态设置style.backdropFilter - 注意：频繁 setStyle 会触发 layout，建议节流 + requestAnimationFrame
真正容易被忽略的一点：模糊值不是越大越“高级”。在高 DPR 设备（如 MacBook Pro 视网膜屏）上，blur(6px) 的观感 ≈ 普通屏的 blur(12px)。上线前务必在真机上验证，而不是只看开发机预览。
