iOS Safari fixed底栏抖动是因Safari 15+动态地址栏导致visual viewport与layout viewport分离，fixed元素不重排；改用absolute定位并设置父容器为绝对定位+100vh+min-height:-webkit-fill-available，再加transform: translateZ(0)强制合成图层可解决。
为什么iOS Safari里fixed底栏会抖动
这不是你CSS写错了，是Safari 15+动态收放地址栏导致视觉视口高度实时变化，而position: fixed元素仍按初始布局视口计算位置，不会重排。滚动时它被“顶起”或“截断”，本质是visual viewport和layout viewport分离设计的副作用。
常见现象：页面刚加载时底栏正常，一滚动到底部就上移、露出白边、被切掉一部分；iPhone全系列都可能复现，iOS 15.0–15.3最严重，15.4+有优化但未根除。
用absolute替代fixed是最稳的纯CSS解法
绕开视口锚定逻辑，让底栏锚定在静态父容器底部，彻底隔离地址栏伸缩干扰：
- 把底栏的
position: fixed改成position: absolute，并保持bottom: 0; left: 0; right: 0; - 确保其**直接父容器**（如
<body>或<div id="app">）设为position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; - 该父容器必须加
height: 100vh; min-height: -webkit-fill-available;——后者专为iOS旧版100vh解析不准兜底
改完后底栏不再随地址栏伸缩跳动，且无需JS、兼容所有iOS Safari版本。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
必须加transform: translateZ(0)防闪烁
即使用了absolute，Safari 15在快速滚动时仍可能偶发重绘延迟，导致底栏短暂错位或闪烁：
-
transform: translateZ(0)或backface-visibility: hidden必须加在**底栏自身**上，不能只加父容器 - 这两个声明是为了强制为其创建独立合成图层，隔离滚动重绘影响
- 别滥用
will-change: transform——它可能触发不必要的图层分裂，反而加重问题
滚动容器别锁在body上
如果项目同时用了body { overflow: hidden }（比如弹窗遮罩），会直接触发fixed/absolute元素抖动，因为Safari放弃视口锚定转而按文档流重算位置：
- 把滚动移至子容器：
body { height: 100vh; overflow: hidden; }，再设一个.scroll-container为height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; -
.scroll-container必须是body的**直接子元素**，嵌套过深会被iOS忽略-webkit-overflow-scrolling - 底栏仍放在
body里，但滚动由子容器承担，fixed/absolute定位才真正“固定”在视口上
真机测试时，微信、QQ、支付宝等WKWebView环境比系统Safari更敏感，容易漏掉这个细节。
