最稳解法是将滚动从 body 移至子容器：body 设为 height: 100vh、overflow: hidden，创建直接子元素 .scroll-container 并设 height: 100vh、overflow-y: scroll、-webkit-overflow-scrolling: touch。
iOS 滑动时 position: fixed 元素卡顿，不是性能差，而是 Safari 主动把 fixed 元素临时降级为 absolute，再靠低频采样同步位置——滚动越快，跳帧越明显。最稳解法是让滚动不发生在 body 上，而不是给 fixed 元素堆 transform。
为什么 transform: translateZ(0) 在 iOS 里经常失效
它只在元素真正独立成层时才起作用，但 iOS Safari（含微信、QQ 等 WKWebView）会主动剥离 fixed 的视口锚定，此时加 translateZ(0) 无法阻止降级。更常见的是“连坐失效”：
- 父级有
transform、filter或opacity ，fixed 元素被拖进新 stacking context，立即失去视口定位能力 -
translateZ(0)加在 wrapper 上，反而让内部 fixed 退化为 relative - 元素含
text-shadow、大圆角或渐变背景，Safari 直接降级回 CPU 渲染 - 和
transition一起用，在 iOS 15+ 上容易引发合成不稳定
必须把滚动从 body 移到子容器
这是目前兼容性最好、抖动消失最彻底的做法。关键不是“怎么加速 fixed”，而是“让它真正在视口上固定”：
-
body设为height: 100vh; overflow: hidden;，切断其滚动能力 - 创建一个
.scroll-container，必须是body的**直接子元素** -
.scroll-container设置height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; - 所有内容（包括 fixed 导航栏、底部按钮）仍写在
body下，但实际滚动只发生在这个容器内
注意：-webkit-overflow-scrolling: touch 是开关，不加滚动会卡顿；加在 body 上反而触发抖动。
监听滚动事件时别监听错目标
position: fixed 元素自身不会触发 scroll 事件，因为它没有滚动能力。iOS 下常见的“监听不到”问题，基本都是目标选错了：
- 不要对
.header { position: fixed; }绑定addEventListener('scroll', ...)，回调永远不会执行 - 真实滚动源通常是设置了
overflow-y: auto的容器，比如.list-wrapper或.scroll-container -
window和document在 SPA 场景中往往 scrollTop 为 0，不可靠 - 动态插入的滚动容器（如 Vue 组件挂载后），确保监听逻辑在元素存在后再执行
防滚动条宽度突变导致的“假抖动”
弹窗打开时 body { overflow: hidden } 让滚动条消失，body 宽度突然增加约 15px，整个页面左移——视觉上像 fixed 元素“抽搐”。这不是定位问题，是布局跳变：
- 加
body { padding-right: calc(100vw - 100%); }，自动补偿滚动条宽度 - iOS Safari 16.4+ 支持该写法；老版本需 JS 检测后写死，例如
document.body.style.paddingRight = '17px' - 避免单纯用
overflow: hidden锁 body，改用body.modal-open { overflow: hidden; }配合上述 padding
真机测试最容易忽略的点：DevTools 模拟器几乎不复现，iOS 微信、QQ、支付宝 WebView 内核往往比系统 Safari 更老，且系统设置里开了“减少动画”会进一步退化合成行为——这些都得实测，不能猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
