遮罩层用 position: fixed 滚动时漏内容，因父容器的 transform/perspective/filter 触发新定位上下文；应移除冗余属性、挂载到 body、设高 z-index、用 inset: 0；响应式背景宜用 min-height/min-width + object-fit 或 JS 动态设置高度；pointer-events: none 需作用于遮罩自身并显式恢复子元素事件；移除遮罩需先 opacity 过渡再隐藏；避免 backdrop-filter 动画；字体单位推荐 px 或 vh 防缩放撑破。
遮罩层用 position: fixed 为什么滚不动页面还漏内容？
因为 fixed 是相对于视口定位，但若父容器有 transform、perspective 或 filter，会触发新的定位上下文，导致遮罩层被截断或错位。常见于用了 transform: translateZ(0) 做硬件加速的容器里。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查遮罩层所有祖先元素，删掉不必要的
transform/filter - 遮罩层直接挂到
<body>下，避开嵌套干扰 - 加
z-index: 2147483647（避免被第三方 UI 库覆盖） - 用
inset: 0替代top: 0; left: 0; right: 0; bottom: 0，更简洁且兼容性一致
响应式遮罩背景怎么适配不同屏幕宽高比？
单纯 width: 100vw; height: 100vh 在 iOS Safari 横屏或地址栏收放时会出问题——vh 不稳定，滚动后可能留白或溢出。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
min-height: 100vh+min-width: 100vw，再配合object-fit: cover（如果是<img>背景） - 背景图优先用
background-size: cover+background-attachment: fixed（慎用，iOS 有渲染 bug） - 真要全屏贴合，改用 JS 动态写
style="height: ${window.innerHeight}px"，并在resize和orientationchange时更新
pointer-events: none 加了却还是点不到底下的按钮？
遮罩层本身没拦截点击，但它的子元素（比如加载文字、图标）默认有 pointer-events: auto，会挡住穿透路径。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 遮罩层设
pointer-events: none，内部所有子元素显式设回pointer-events: auto - 如果遮罩只是视觉层，别给它加任何
onclick或监听事件，避免干扰事件流 - 用
opacity: 0.8而非visibility: hidden或display: none，否则pointer-events: none失效
加载完成时如何平滑移除遮罩而不闪一下？
直接 display: none 会瞬间消失，尤其遮罩带背景渐变或模糊滤镜时，视觉断裂明显。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 移除前先加 CSS 过渡：
transition: opacity 0.2s ease-out - JS 中先改
opacity: 0，等transitionend后再设display: none或从 DOM 移除 - 避免在遮罩上用
backdrop-filter: blur()同时做动画，Safari 渲染卡顿严重
最易忽略的是：遮罩层的 font-size 和 line-height 如果用 rem/em，在页面根字体缩放（如用户设置系统字号放大）时可能撑破布局——固定用 px 或 vh 单位更稳。
