不是你css写错了，而是ios safari把position: fixed悄悄降级成了position: absolute——它不再锚定视口，而是锚定某个父容器；修复关键是切断transform/filter/perspective/overflow-scrolling: touch等干扰源，或改用teleport挂载到body、position: sticky（需父容器min-height: 100vh）、或将滚动移至子容器并启用-webkit-overflow-scrolling: touch。
直接说结论：不是你CSS写错了，而是iOS Safari把position: fixed悄悄降级成了position: absolute——它不再锚定视口，而是锚定某个父容器。修复的关键不是加!important，而是切断干扰源或换锚点。
为什么fixed在iOS上会“跟着滚动”
这是WebKit的规范行为，不是bug。只要任意祖先元素设置了以下任一属性，就会创建新包含块，导致position: fixed退化：
-
transform（哪怕只是transform: translateZ(0)） -
filter（除opacity外） -
perspective、will-change -
overflow-scrolling: touch（尤其uni-app的scroll-view）
典型表现：手指一拖，顶部导航就偏移；松手后卡在错误位置；DevTools里computed值仍是fixed，但offsetTop已按父级算。真机测试时，Composited Layers面板里找不到该元素，说明它根本没被GPU加速。
怎么快速定位是哪个父级在“搞破坏”
别靠猜，用Safari DevTools逐层排查：
- 选中失效的元素，在Elements面板按住
Shift连续点右上角箭头，向上跳父节点 - 每跳一层，切到Computed标签页，搜索
transform、filter、will-change - 重点盯
transform: translateZ(0)和opacity: 0.99（某些UI库默认加） - 检查是否在
scroll-view、.page-content或.main-panel这类滚动容器内部
uni-app H5端尤其要注意：scroll-view自带滚动层，只要fixed元素在里面，删样式也救不回来。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
真正稳的三种实操解法
绕开问题比硬刚更有效：
-
把fixed元素挂到
下：Vue3用<teleport to="body"></teleport>，React用ReactDOM.createPortal，纯JS用document.body.appendChild(el) -
改用
position: sticky：只适用于吸顶/吸底场景，必须满足——父容器设min-height: 100vh且无transform/overflow: hidden，自身设sticky; bottom: 0;+z-index -
把滚动从
body移到子容器：给body设height: 100vh; overflow: hidden;，再建一个.scroll-container作为实际滚动区，并加-webkit-overflow-scrolling: touch
注意：scroll-container必须是body的直接子元素，嵌套过深iOS可能忽略-webkit-overflow-scrolling。
软键盘弹出时fixed被顶飞怎么办
iOS不会重算fixed位置，它只认旧视口高度。监听focusin时不能立刻读getBoundingClientRect()，因为键盘还没展开：
- 必须加
setTimeout(() => { /* 读window.innerHeight - inputRect.bottom */ }, 0) - 公式是
window.innerHeight - inputRect.bottom，不是inputRect.top，也不是写死200px -
blur后立刻清除内联bottom并恢复position: fixed，否则滚动时元素会消失 - 别用
resize事件——iOS基本不触发
最易被忽略的是：DevTools模拟器几乎不复现抖动；微信WebView内核往往比系统Safari更老；开了“减少动画”会进一步退化合成行为——测试前务必关掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
