uni-app自定义弹窗遮罩层不跟随滚动的正确做法是：避免使用position:fixed，改用position:absolute+100vw/100vh，H5端加transform:translateZ(0)硬件加速，App端需将遮罩挂载到page外层。
uni-app 弹窗遮罩层不跟随滚动怎么办
遮罩层固定在视口，但内容区域滚动时遮罩层跟着动——这是 position: fixed 在 iOS WebView 和部分安卓 WebView 中失效导致的。uni-app 的 uni.showModal 等原生弹窗不支持自定义样式，所以必须手写组件，而手写时容易忽略 WebView 渲染特性。
- 别用
position: fixed直接套在view上：H5 端在 iOS 下会“粘”在页面滚动位置，不是视口中心 - 正确做法是把遮罩层和弹窗都放在
page根节点下（用uni.createSelectorQuery()或uni.getSystemInfoSync()动态计算高度），或改用position: absolute+top: 0; left: 0; width: 100vw; height: 100vh; - H5 端可加
transform: translateZ(0)强制硬件加速，避免遮罩层闪烁或错位 - App 端（iOS）需注意：如果页面用了
scroll-view，遮罩层必须挂载到page外层（如通过uni.$emit+ 全局插槽），否则会被scroll-view的 overflow 隐藏
uni-app 自定义弹窗怎么阻止背景点击穿透
点了遮罩层没关闭、或者点到后面按钮触发了事件——本质是 touch 事件冒泡或 catchtouchmove 没写全。uni-app 的事件捕获比小程序更弱，尤其在 H5 端。
- 遮罩层必须同时写
catchtouchmove和catchtap（不能只写bindtap），否则 iOS 下快速点击可能穿透 - 弹窗内容区要加
catchtouchmove，防止内部滚动时触发背景滚动（特别是 Android 微信内置浏览器） - 别依赖
pointer-events: none控制交互：H5 端兼容性差，App 端部分版本不识别 - 简单方案：遮罩层
z-index设为 9999，弹窗设为 10000，并确保父容器没设overflow: hidden或transform（会创建新层叠上下文，导致 z-index 失效）
uni-app 弹窗动画卡顿或闪一下再出现
动画靠 transition 或 animation 实现时，H5 端常见卡顿，App 端某些安卓机直接无动画——根本原因是 uni-app 的 view 组件在非原生渲染路径下，CSS 动画帧率不稳定。
- 优先用
transform: scale()+opacity做入场动画，别用height或margin（触发布局重排） - 动画 duration 别设太短（
200ms是底线），iOS WebView 对300ms以下动画支持差 - App 端建议用
uni.showToast或uni.showLoading这类原生 API 做轻量提示；真需要复杂弹窗，用uni.navigateTo跳转独立弹窗页（规避渲染层级问题） - H5 端可加
will-change: transform提前声明动画属性，但仅限弹窗显示前一刻设置，避免长期占用 GPU 内存
uni-app 自定义弹窗在不同平台表现不一致
同一个弹窗组件，在微信小程序里居中正常，H5 端偏上，App 端又偏左——不是代码写错了，是各端对 vh、flex、transform-origin 解析差异太大。
- 别用
vh做高度基准：H5 端地址栏缩放会改变100vh值，iOS App 端 WebView 可能不支持 - 居中统一用
display: flex+justify-content: center; align-items: center，父容器高度设为100%并确保其祖先没overflow: hidden - App 端安卓部分低版本（如 Android 6）不支持
transform: translate(-50%, -50%)，得降级成left: 50%; top: 50%; margin-left: -Xpx; margin-top: -Ypx;（X/Y 用uni.upx2px计算） - 最稳方案：用
uni.getSystemInfoSync().windowHeight动态算出中间坐标，配合position: absolute定位，虽然麻烦但跨端一致性最高
实际做下来，最难的不是写出来，而是让遮罩层在 iOS 微信里不随页面滚动、在安卓低版本上不偏移、在 H5 里不闪屏——这些细节得挨个平台测，光看文档没用。
