遮罩层未盖满全屏是因 fixed 元素需四边定位（top/right/bottom/left: 0 或 inset: 0），嵌套在 transform/filter 容器中会创建新定位上下文导致偏移，须挂载到 body 底部并处理事件冒泡、滚动锁定及 safari 兼容性问题。
遮罩层没盖满全屏，不是 CSS 写错了，而是 position: fixed 元素默认尺寸是内容自适应，不是自动撑满视口——必须显式让它“贴住四边”。
为什么 position: fixed 设了 top: 0; left: 0 还是漏白
只设两个方向，元素只会锚定左上角，宽高仍由内容决定，结果缩成一个点或窄条。常见于复制代码时漏掉 right: 0 和 bottom: 0。
- 正确写法必须四边全写：
top: 0; right: 0; bottom: 0; left: 0，或更简洁的inset: 0 -
inset: 0是现代推荐写法（Chrome 89+、Firefox 63+、Safari 14.1+），语义清晰且不易漏边 - 旧版 Safari（如 14.0）不支持
inset，需并行兜底：inset: 0; top: 0; right: 0; bottom: 0; left: 0 - 别用
width: 100vw; height: 100vh：滚动条宽度会让100vw溢出，iOS Safari 地址栏收放会让100vh跳变
遮罩层挂在哪一级 DOM 才不会被截断
遮罩层若嵌套在某个 div 里，而该 div 有 transform、filter 或 will-change，就会创建新定位上下文，导致 fixed 相对于它而非视口定位——这是 iOS 和 Android WebView 中遮罩偏移的头号原因。
- 最稳妥做法：用 JS 动态插入到
document.body底部，例如document.body.append(overlayEl) - 检查祖先节点：用 DevTools 的 “Computed” 面板搜
transform和filter，有就删或绕开 - 避免把遮罩塞进
overflow: hidden容器里，否则直接被裁掉
点击遮罩关闭弹窗，但点弹窗内部也关了
这是事件冒泡未拦截的典型表现。监听遮罩的 click 时，弹窗作为子元素的点击会向上冒泡到遮罩层。
- 安全写法：在事件回调中加判断
if (event.target === event.currentTarget) { close() } - 更彻底：给弹窗容器加
pointer-events: auto（默认已是），并在其 click 处理中调用e.stopPropagation() - 遮罩本身必须设
cursor: pointer，否则 Safari 可能不触发 click - 别给遮罩设
pointer-events: none后还指望它响应关闭逻辑——那等于主动放弃交互
移动端 Safari 滚动时遮罩抖动或底部留白
这不是 CSS 问题，而是 iOS Safari 对视口高度的定义随地址栏动态变化，fixed 元素不会自动重绘位置。
- 视觉覆盖之外，必须配合滚动锁定：
document.body.style.overflow = 'hidden'（注意隐藏后要恢复） - 更可靠方案（尤其防回弹）：显示遮罩时设
document.body.style.position = 'fixed'; document.body.style.top = `-${window.scrollY}px`；关闭时还原并window.scrollTo(0, scrollY) - 防键盘弹出穿透：加
body { overscroll-behavior: contain; } - 别依赖
user-scalable=no，现代浏览器已忽略
真正上线时最难缠的，从来不是写几行 CSS，而是 transform 创建的新定位上下文、z-index 被层叠上下文隔离、以及 Safari 对 dvh 和 backdrop-filter 的实现差异——这些必须用 DevTools 的 “Layers” 和 “Computed” 面板逐层验证，不能只靠样式代码猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
