移动端loading遮罩盖不全屏幕的根本原因是position: fixed在ios safari中受视口动态变化、祖先层叠上下文和滚动条宽度三重干扰，必须同时设置top/right/bottom/left: 0并挂载到document.body，禁用vw/vh和百分比尺寸，配合overflow隐藏、高z-index及动态resize监听。
为什么移动端Loading遮罩总盖不全屏幕
根本不是代码写错了，而是 position: fixed 在移动端（尤其 iOS Safari）下被视口动态变化、祖先层叠上下文、滚动条宽度三重干扰。常见表现：拉滚动条后遮罩消失、底部留白、横屏时错位、点击无响应——这些都不是“没写全”导致的，是浏览器行为与 CSS 定位机制的天然冲突。
必须同时设置 top/right/bottom/left: 0
只写 position: fixed 或只写 top: 0; left: 0，遮罩默认尺寸仍是内容自适应，不会自动铺满。iOS Safari 尤其严格，漏写任意一边都会导致边缘留白或定位偏移。
- 正确写法：
top: 0; right: 0; bottom: 0; left: 0;（inset: 0更简洁，但需注意 Safari 14.1+ 才支持） - 禁用
width: 100vw; height: 100vh：100vw 包含滚动条宽度，会触发水平溢出；100vh 在 iOS 地址栏收起/展开时跳变，底部必然漏空 - 禁用
width: 100%; height: 100%：fixed 元素的百分比高度在多数浏览器中无效，行为不可靠
遮罩挂载位置和父容器陷阱
哪怕 CSS 写得再准，只要遮罩 DOM 节点挂在某个带 transform、filter 或 will-change 的父容器里，它就会被“锁住”，变成相对于该父容器定位，而不是视口——这是 Element UI、Ant Design 等组件库中遮罩失效的头号原因。
- 必须把遮罩节点直接
appendChild到document.body，绕过所有业务容器 - 用 DevTools 的 “Computed” 面板检查遮罩的
Containing block，若显示为某个div而非(root)，说明已被劫持 - 常见隐形触发器：
transform: translateZ(0)、opacity: 0.99、filter: blur(1px)，哪怕只是过渡动画残留也要清掉
滚动穿透和层级失效的硬性配套措施
只靠 CSS 无法阻止底层滚动，也不能保证遮罩永远在最上层。iOS Safari 对 z-index 解析更敏感，且滚动事件不走 pointer 事件链路，pointer-events: none 对防滚动完全无效。
- 激活遮罩时，必须同步执行：
document.body.style.overflow = 'hidden'，关闭时恢复为'auto' -
z-index至少设为99999：Bootstrap 默认 backdrop 是 1040，Ant Design 是 1000，Element UI 是 2000，保守起见建议 ≥ 100000 - 遮罩背景色必须显式声明，如
background-color: rgba(0, 0, 0, 0.6)；全透明（rgba(0,0,0,0)）在部分 WebView 中视为不可点击 - 如果遮罩内有按钮或输入框，务必给它们单独加
pointer-events: auto，因为遮罩本身设了pointer-events: none后不会继承
resize 并更新 height，否则仅靠 CSS 永远存在边界风险。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
