iOS Safari 中 position: fixed “飘走”是因 transform 或 overflow-scrolling: touch 导致其退化为 absolute；应避免在 fixed 元素及其祖先上使用 transform，改用 will-change 或 sticky 替代。
移动端 position: fixed 在 iOS Safari 上突然“飘走”
这不是 bug，是 iOS WebKit 的主动限制：当页面存在 transform（哪怕只是 transform: translateZ(0)）或 overflow-scrolling: touch 时，position: fixed 元素会退化为 position: absolute，跟随滚动而移动。
典型现象：顶部导航栏在手指滑动时跟着页面一起上移，松手后才“弹回”原位；或者直接卡在某个偏移位置不动。
- 只影响 iOS Safari 和基于 WebKit 的 WebView（如微信内置浏览器）
- Android Chrome 通常正常，但部分旧版 UC 或 QQ 浏览器也有类似表现
-
transform触发 GPU 加速本身没错，但和fixed同时存在就会冲突
用 transform: translateZ(0) 开启 GPU 加速反而让 fixed 失效
很多人加 transform: translateZ(0) 是为了强制硬件加速，提升动画/滚动性能。但这个操作会创建一个新的 stacking context 和 containing block，导致 fixed 不再相对于视口定位，而是相对于这个新层定位 —— 而该层本身可能正在滚动或缩放。
- 不要给
body、html或包含fixed元素的父容器加任何transform - 如果必须加速某个子元素（比如轮播图），确保它和
fixed元素无 DOM 包含关系 - 替代方案：用
will-change: transform替代translateZ(0)，它只提示浏览器“可能变化”，不立即创建新层
真正安全的 GPU 加速写法：避开 fixed 容器及其祖先
GPU 加速不是非得靠 transform。现代浏览器对 opacity、filter、will-change 同样支持硬件加速，且不会破坏 fixed 行为。
立即学习“前端免费学习笔记（深入）”；
- 对需要动画的元素，优先用
will-change: opacity或will-change: transform（注意：只加在目标元素自身，别加在父级） - 避免在
fixed元素或其任意祖先上设置transform、perspective、filter（除opacity外） - 检查 DevTools 的 Layers 面板：如果
fixed元素没出现在 “Composited Layers” 中，说明它没被隔离 —— 这反而是好事
兼容性兜底：不用 transform 也能让 fixed 稳住
如果已经用了 transform 且无法剥离（比如第三方 SDK 强制注入），可以尝试用 JavaScript 补偿滚动偏移，但这是下策。
- 监听
scroll事件 +touchmove，动态设置top值（注意 iOS 的scrollTop在 overscroll 时会为负） - 更稳妥的做法：改用
position: sticky（配合top: 0），在支持的机型上行为更可控 - 终极判断标准：在真机 Safari 上打开，双手快速滚动 + 突然松手，观察固定元素是否“粘滞”或“跳动”
最常被忽略的一点：iOS 的 viewport 缩放、第三方键盘唤起、甚至 Safari 的地址栏收起动画，都会临时改变视口尺寸，间接影响 fixed 元素的位置计算 —— 所以不要只测静止状态。
