fixed inset-0 不等于全屏遮罩，因父容器若含 transform/perspective/filter 会创建新定位上下文，使 fixed 相对非视口计算；需检查 containing block 并修复，同时添加 pointer-events-auto 和 z-40 防穿透与层级覆盖。
为什么 fixed inset-0 不等于“全屏遮罩”
直接写 fixed inset-0 bg-black/50 很可能只盖住当前视口高度，一滚动就露底——这不是 Tailwind 写错了，而是父级元素（比如 <html>、<body> 或某个 wrapper）触发了新的定位上下文。只要祖先节点有 transform、perspective 或 filter，fixed 就不再相对于视口，而是相对于那个被“截断”的 containing block。
快速验证：用浏览器开发者工具选中遮罩元素 → 查看 Computed → Position → Containing Block。如果不是 viewport，问题就在这儿。
- 临时加
transform: none !important到<html>和<body>上测试是否恢复 - 若必须保留 transform（如某些 UI 库 modal wrapper），放弃
inset-0，改用显式定位：fixed top-0 right-0 bottom-0 left-0（Tailwind 不生成这组规则，需内联或自定义 class） - 确保遮罩和弹窗是兄弟节点，别嵌套在同一个带 transform 的容器里
遮罩层点击穿透怎么防
bg-black/50 本身不拦截事件，它只是个背景色。如果点一下遮罩，背后按钮却响应了，说明遮罩没“挡住”鼠标事件。
- 默认情况下，
pointer-events是auto，但 Tailwind 不设它——所以得显式加pointer-events-auto - 别误用
pointer-events-none：那会让遮罩彻底透传，背后所有交互都生效 - 必须配
z-50或更高（比如z-40），否则即使设了pointer-events-auto，也可能因层级太低而被其他元素“盖住”，实际仍点不到
正确写法：<div class="fixed inset-0 bg-black/50 pointer-events-auto z-40"></div>
立即学习“前端免费学习笔记（深入）”；
移动端 Safari 滚动时遮罩错位怎么办
iOS Safari 在地址栏收放、键盘弹出时会重算视口高度，fixed 元素可能短暂偏移或抖动。这不是代码 bug，是浏览器渲染机制限制。
- 避免在
scroll或resize事件里动态切换遮罩状态；优先用 class 切换 + CSS transition 控制显隐 - 给遮罩加
will-change: transform（可自定义 class 如will-change-transform）能减少重绘抖动 - 遮罩和弹窗容器都用
fixed，且保持平级关系——不要把弹窗包在遮罩内部，否则 iOS 下容易触发奇怪的 stacking behavior
如何让遮罩适配深色模式和模糊效果
bg-black/50 在深色背景下几乎看不见，而 backdrop-blur 默认不启用，还存在兼容性陷阱。
- 深色模式下改用
bg-white/20 dark:bg-black/50或更稳妥的bg-gray-900/60 dark:bg-gray-900/80，避免纯黑/白硬编码 -
backdrop-blur需在tailwind.config.js中手动开启，并配置强度（推荐sm～md，即 4px～8px） - Firefox 完全忽略
backdrop-blur，不能靠 JS 检测后加 class——必须提供无模糊的视觉降级方案（比如仅靠透明度+颜色对比）
真正容易被忽略的是：模糊效果只应在固定定位的遮罩层上用，别往滚动容器里塞 backdrop-blur，否则滚动时性能暴跌且模糊区域错乱。
