ios fixed弹窗滚动抽搐主因是safari 13–16默认不为其创建独立gpu合成层，致主线程重绘跟不上视口坐标更新，本质为采样延迟；body宽度跳变（overflow: hidden导致滚动条消失）和错误使用translatez(0)亦加剧该问题。
为什么iOS fixed弹窗一滚动就抽搐
不是你CSS写错了，是iOS Safari（尤其13–16）默认不给position: fixed弹窗创建独立GPU合成层。它被拖进主线程重绘，滚动时视口坐标更新跟不上——抖动本质是“采样延迟”，不是渲染错误。微信、QQ、支付宝WebView内核更老，问题更明显。
body宽度跳变才是真凶，不是fixed本身
弹窗打开时body { overflow: hidden }让滚动条消失，body突然变宽约15px，内容左移——视觉上像弹窗在抖。这不是定位失效，是布局突变。
-
body { padding-right: calc(100vw - 100%) }自动补位，滚动条始终占位 - 老版Safari（iOS 14以下）不支持
calc动态计算，需JS测宽后写死：document.body.style.paddingRight = '17px' - 别用
margin-right替代，它不参与box-sizing，撑不开容器宽度
把滚动从body挪走，比硬加transform更稳
给body加overflow: hidden会触发Safari放弃视口锚定，fixed弹窗退化为按文档流重算位置——这是“橡皮跳动”的根源。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
body { height: 100vh; overflow: hidden; }切断body滚动通路 -
.scroll-container { height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; }——-webkit-overflow-scrolling: touch必须加，否则卡顿 -
.scroll-container必须是body的直接子元素，嵌套过深iOS可能忽略该属性 - 弹窗（
position: fixed）仍放在body里，但实际滚动的是这个div，fixed自然锚定视口
translateZ(0)经常白加，条件太苛刻
transform: translateZ(0)只在严格满足条件时才真正升层，否则就是空转：
- 必须加在fixed弹窗自身上，加在父容器会让它退化为
relative - 任意祖先带
transform、filter或opacity，会把弹窗裹进另一个合成层，translateZ(0)直接失效 - 弹窗含
text-shadow、渐变背景或border-radius，Safari可能直接降级回CPU渲染 - 和
transition一起用，在iOS 15+上容易引发合成不稳定
真机测试最容易漏掉三点：DevTools模拟器几乎不复现；系统“减少动画”设置会抑制合成行为；要用Safari Layers面板确认弹窗是否出现在“Composited Layers”里——没出现，说明根本没GPU加速。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
