fixed毛玻璃弹窗生效需满足三条件：背后有真实内容、自身半透明、不被层叠上下文截断；否则backdrop-filter无效。
fixed定位的毛玻璃弹窗能用，但必须满足三个硬条件：背后有真实内容、自身半透明、不被层叠上下文截断。否则blur值再大也没用。
为什么fixed弹窗加了backdrop-filter还是没模糊效果
根本原因不是代码写错，而是backdrop-filter在position: fixed下容易“滤了个寂寞”——它只模糊视觉后方的真实DOM内容，而fixed元素常悬浮在body最上层，背后只剩白底或空容器。
- 检查弹窗是否设置了
background: rgba(255,255,255,0.7)这类带alpha通道的背景；纯色rgba(0,0,0,1)或#000会挡住背后一切 - 确认
或其直接子容器有可被模糊的内容（比如背景图、滚动列表、地图Canvas），不能是空div - 移除父级的
overflow: hidden，它会裁掉模糊所需的像素扩散区域 - 避免在弹窗或其任意父级上使用
transform: translateZ(0)、will-change: transform或isolation: isolate，这些会创建新层叠上下文，阻断backdrop采样
fixed毛玻璃弹窗的z-index和层叠关系怎么设
fixed元素默认脱离文档流，但backdrop-filter生效依赖它“后面”真有东西。如果z-index设得太高，或者下方内容没明确z-index，就可能悬在所有内容之上，背后只剩空白。
- 给弹窗设
z-index: 100，同时确保它要模糊的背景内容（比如主内容区）z-index ≤ 99 - 不要依赖默认z-index顺序，显式声明所有相关容器的z-index值
- 移动端Safari对嵌套backdrop支持弱，避免在已用
backdrop-filter的父容器里再套fixed弹窗 - 若弹窗遮挡下方可交互内容（如滚动列表），可临时加
pointer-events: none到模糊伪元素上，但别加在弹窗主体上
如何让fixed毛玻璃弹窗在滚动时保持性能稳定
fixed定位+实时模糊=高渲染开销，尤其在中低端安卓机和iOS Safari上容易卡顿、掉帧。
- 模糊值控制在
blur(6px)以内，实测blur(8px)在部分Android 12设备上帧率明显下降 - 避免在弹窗内放大量文字或复杂SVG；文字清晰度下降往往是性能妥协的结果，不是CSS写错了
- 不用
@keyframes动画驱动backdrop-filter——规范不支持，Chrome会忽略，Firefox报warning - 需要动态变化时（如hover增强模糊），用
transition: backdrop-filter 0.2s ease+ class切换，比JS频繁设style.backdropFilter更稳
移动端fixed毛玻璃弹窗的兼容性兜底方案
iOS和macOS Safari支持最好，Chrome for Android基本可用，但Windows Chrome和Firefox（≤101）原生不支持backdrop-filter，且无法通过flag开启。
- 用JS检测：
if ('backdropFilter' in document.documentElement.style || '-webkit-backdrop-filter' in document.documentElement.style)，命中则加supports-backdrop类 - CSS中写
.modal.supports-backdrop { backdrop-filter: blur(6px); background: rgba(255,255,255,0.7); }，不支持时降级为background: rgba(255,255,255,0.85)+border: 1px solid rgba(255,255,255,0.2) - Firefox用户占比高时，别依赖
backdrop-filter做核心交互提示——它在102之前默认关闭，手动开启率极低
真正难的不是写出backdrop-filter: blur(6px)，而是确保这行代码执行时，浏览器真的有东西可模糊、有空间可扩散、有层级可穿透。漏掉其中任一环，效果就断在半路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
