遮罩层未铺满全屏的根本原因是fixed元素默认尺寸为内容自适应，应设inset:0或宽高100%；需确保z-index足够大、pointer-events正常、背景色不透明，并注意iOS Safari视口变化及深色模式适配。
遮罩层用 position: fixed 但没铺满全屏？
常见现象是遮罩只盖住可视区一部分，滚动后消失，或边缘留白。根本原因是 fixed 元素默认尺寸为内容自适应，不是自动撑满视口。
正确做法是显式设置宽高为 100%，或更推荐用 inset: 0 —— 它等价于 top: 0; right: 0; bottom: 0; left: 0，语义清晰且不易漏写某一边。
-
inset: 0在 Chrome 58+、Firefox 62+、Safari 14.1+ 支持，旧版 Safari 需回退到四边分别写 - 若遮罩内有子元素需要居中，别依赖
margin: auto，fixed下它不生效；改用display: flex+justify-content/align-items - 确保父容器没设置
transform、perspective或filter，否则会创建新的定位上下文，让fixed相对于该容器而非视口
遮罩点击穿透或无法响应事件？
遮罩本身没设 pointer-events: auto（默认值），但若父级或祖先元素设置了 pointer-events: none，或遮罩的 z-index 被其他层压住，就会点不中。
检查顺序建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具确认遮罩元素是否在最上层：
z-index值要足够大（比如9999），且没有被isolation: isolate或contain: layout干扰堆叠上下文 - 遮罩背景色必须明确设置（如
background-color: rgba(0,0,0,0.5)），完全透明（rgba(0,0,0,0)）时部分浏览器视为“不可点击” - 避免给遮罩加
opacity: 0来隐藏——它仍占位响应事件；该用visibility: hidden或display: none
移动端 Safari 滚动时遮罩抖动或错位？
这是 iOS Safari 的经典 bug：地址栏收起/展开导致视口高度变化，而 fixed 元素不会自动重绘位置，造成遮罩偏移。
临时缓解方案（非根治）：
- 监听
scroll和resize事件，触发时强制重排：document.body.style.transform = 'translateZ(0)'，随后立刻设回none - 更稳妥的是避开
fixed，改用position: absolute+ 动态计算视口高度：height: ${window.innerHeight}px，并在orientationchange和resize时更新 - 注意：不要用
vh单位（如height: 100vh），iOS Safari 中它常等于初始视口高度，滚动后不更新
遮罩需要适配深色模式或动态主题？
遮罩背景色不能写死，尤其当页面支持系统级深色模式时，rgba(0,0,0,0.5) 在深色背景下对比度不足，反而降低可读性。
推荐方式：
- 用 CSS 自定义属性配合
@media (prefers-color-scheme: dark)：:root { --mask-bg: rgba(0, 0, 0, 0.5); }<br>@media (prefers-color-scheme: dark) { :root { --mask-bg: rgba(0, 0, 0, 0.7); } }<br>.mask { background-color: var(--mask-bg); } - 如果遮罩需跟随主题切换动画，避免直接过渡
background-color，改用backdrop-filter: blur(2px)配合半透背景，视觉更自然 - 注意：部分安卓 WebView 对
prefers-color-scheme支持不稳定，上线前务必真机验证
fixed 遮罩可能卡在错误位置，这时候光靠 CSS 很难兜底，得结合 JS 监听 focusin 和 blur 做补偿。 
