移动端 fixed 弹窗“飘”是因 ios safari 和部分安卓 webview 对 position: fixed 实现不完善，键盘弹出、滚动或地址栏变化时错位；应强制 gpu 合成、避免 top/bottom 同设、禁用 100vh、动画仅用 transform/opacity、遮罩层配 touch-action: none 和 pointer-events: auto、小程序中用 transform+opacity 替代 display:none 或 height 动画。
移动端 fixed 定位为什么弹窗总“飘”？
不是你 CSS 写错了，是 iOS Safari 和部分安卓 WebView 对 position: fixed 的实现有缺陷：键盘弹出、页面滚动、地址栏收起时，fixed 元素会错位或跟着滚。这不是 bug，是规范没被严格执行。
实操建议：
- 给弹窗容器加
transform: translateZ(0)或will-change: transform，强制走 GPU 合成线程，减少抖动 - 避免同时设
top和bottom（比如别写top: 0; bottom: 0），优先用bottom: 0+transform控制位置 - 别用
100vh做高度——Safari 在键盘弹出后不会更新 viewport 高度，改用100%或 JS 动态算document.documentElement.clientHeight
动画卡顿？只动 transform 和 opacity
用 bottom、height、left 做动画，手机端大概率卡顿。因为这些属性触发 layout（重排）和 paint（重绘），主线程扛不住。
实操建议：
- 入场动画写成：
transform: translateY(100%)→transform: translateY(0) - 千万别用
bottom: -100%+transition: bottom，它在很多安卓机上不生效 - 加
backface-visibility: hidden防安卓闪屏 - 动画时长控制在
300ms内，超过400ms用户明显感知延迟
遮罩层点不透、手势穿透怎么办？
点了灰色遮罩没反应，或者 iOS 上一滑就穿透到底部内容，甚至唤出系统菜单——根本不是事件没绑，是 touch-action 和 pointer-events 没配对。
实操建议：
- 遮罩层必须设
touch-action: none，禁用浏览器默认手势（缩放、双击等） - 遮罩层设
pointer-events: auto（默认值，但显式写出来更稳）；弹窗内容区域设pointer-events: auto，别继承父层 - 如果弹窗里要滚动，内容区需额外加
touch-action: pan-y，否则 iOS 会阻断纵向滑动 - 别依赖
z-index乱堆，确保遮罩层z-index比弹窗低、比页面内容高（比如遮罩z-index: 999，弹窗z-index: 1000）
小程序里怎么写？避开 display: none 和重排
小程序的 animation API 或纯 CSS @keyframes 都能用，但常见坑是：用 display: none 切换状态，导致每次动画前强制重排；或用 height 动画，安卓低端机直接掉帧。
实操建议：
- 用
transform: translateY()+opacity组合动画，WXML 中只切 class，不操作hidden属性 - WXSS 里把基础样式（
position: fixed、bottom: 0、transition）写在默认类中，动画类只负责起止值 - 小程序中慎用
rpx做 translateY 距离，某些机型解析不准，推荐用px或百分比（如transform: translateY(100%)） - 如果用
wx.createAnimation，记得step()后立即export()，别跨帧调用
transform 合成层的处理差异——iOS 需要 translateZ(0)，某些安卓机反而因过度触发硬件加速导致内存溢出。上线前务必真机测三台以上设备。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
