用 rgba() 控制遮罩背景透明度，别用 opacity；后者会使子元素变透明、文字发虚、点击失效，而 rgba() 仅影响背景，子元素保持清晰可交互。
遮罩层透明度在移动端变糊？用 rgba() 别用 opacity
直接说结论：用 rgba(0, 0, 0, 0.6) 控制背景透明，别对整个遮罩元素设 opacity: 0.6。后者会让里头所有子内容（文字、图标、按钮）一起变透明，导致 ios safari 下文字渲染发虚，安卓部分 webview 里点击区域也变弱。
常见错误现象：opacity 设完后，遮罩里的 button 看着灰蒙蒙、按不响；或在 iphone 上文字边缘有半透明锯齿。
-
rgba()只影响背景色本身，子元素保持 100% 清晰度和可交互性 - 如果需要动态控制透明度（比如 hover 淡入），用
transition: background-color 0.3s，不是transition: opacity - 旧版 android 4.3 及以下不支持
rgba()背景？加一行background-color: #000降级兜底
遮罩动效卡顿？避免在 transform 外触发重排
遮罩入场动画（比如从下往上滑入）必须用 transform: translateY() + transition，别碰 top 或 margin-top。后者会强制浏览器每帧重排布局，尤其在低端安卓机上掉帧明显。
使用场景：弹窗打开时遮罩先淡入、再带动态内容滑入；关闭时反向执行。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
transform: translateY(100%)→transform: translateY(0)，配合will-change: transform提前提示 GPU 加速 - 别写
top: 100%→top: 0，哪怕加了transition也会卡 - 如果遮罩要配合内容高度自适应（比如全屏遮罩盖住不定高弹窗），确保父容器有
position: fixed，且遮罩自身不依赖height: 100vh（iOS Safari 的vh在地址栏收起/展开时会跳变）
不同设备下遮罩尺寸错位？100vw 和 100vh 不可靠
iOS Safari 滚动时地址栏隐藏/显示，100vh 会在 667px → 736px 之间跳变；Android 部分厂商浏览器对 100vw 计算包含滚动条宽度。结果就是遮罩盖不住底部，或者右边多出白边。
解决方式统一用 position: fixed + 四边定位，不依赖视口单位：
-
top: 0; right: 0; bottom: 0; left: 0;是最稳的全屏覆盖写法 - 如果要兼容 IE11，避免用
inset: 0（它等价但不被支持） - 遮罩内嵌内容需居中？用
display: flex; align-items: center; justify-content: center，别靠margin: auto或top: 50%; transform: translateY(-50%)（后者在页面缩放时偏移不准）
触摸设备上遮罩点透？pointer-events 必须设对
遮罩层没阻止底层内容响应点击，常见于 Vue/React 动态插入遮罩后忘记设 pointer-events: auto，或用了 visibility: hidden 却没关事件穿透。
关键判断：遮罩显示时，底层按钮仍能点中；或遮罩关闭后，手指抬起来的位置刚好触发了下层链接。
- 遮罩元素必须有
pointer-events: auto（默认值，但显式写上更保险） - 遮罩隐藏时，用
display: none或visibility: hidden，别只靠opacity: 0—— 后者仍接收点击 - 如果遮罩里有可点击子元素（如关闭按钮），确保它们的
pointer-events没被父级pointer-events: none意外拦截
事情说清了就结束。最常漏的是 rgba() 替代 opacity 这一条，很多人调完透明度觉得“看起来一样”就上线，结果用户反馈“字看不清”“点不动”，其实就差改一个属性。