safari 15+底部栏错位是因地址栏动态伸缩导致视觉视口变化而fixed元素未重排；推荐用absolute替代fixed并配合父容器height:100vh和-webkit-fill-available兜底，辅以transform:translatez(0)防闪烁。
iPhone上Safari浏览器中fixed定位的底部栏被地址栏顶起、错位或截断，是因为Safari 15+在滚动时动态收起/展开底部地址栏，导致视觉视口高度实时变化，而fixed元素仍按初始渲染时的布局视口计算位置，不会重排。
确认是否为地址栏遮挡问题
打开页面后先别滚动，观察底部栏是否紧贴屏幕底边且完整显示；再缓慢向下滚动到底部，看它是否突然上移、露出白边、被截掉一部分或完全消失。如果仅在滚动过程中出现异常，基本可确定是Safari地址栏行为所致——这不是bug，而是iOS对visual viewport和layout viewport分离设计的体现。
【关键前提】此现象在iOS 15.0–15.3中尤为明显，15.4+虽有优化但未根除，所有大屏iPhone均可能复现。
用absolute替代fixed（推荐方案）
这是无需JS、兼容全版本iOS Safari、稳定性最高的纯CSS解法：
- 将底部栏元素的
position: fixed改为position: absolute； - 确保其直接父容器（如
或<div id="app">）设置为<code>position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;； - 给该父容器添加
height: 100vh; min-height: -webkit-fill-available;，后者专为iOS Safari旧版对100vh解析不准兜底； - 底部栏保持
bottom: 0; left: 0; right: 0;，此时它将锚定在父容器底部，不再受地址栏伸缩干扰。
这一步改完后，底部栏就彻底脱离了“视口锚定”逻辑，转而依赖父容器这个静态高度盒子，抖动自然消失。
强制GPU加速防卡顿
即使用了absolute，Safari 15在快速滚动时仍可能偶发重绘延迟，让底部栏短暂错位或闪烁：
给底部栏元素直接添加transform: translateZ(0)或backface-visibility: hidden。
【关键前提】这两个声明必须写在底部栏自身上，不能只加在父容器；否则无法为其单独创建合成图层，起不到隔离作用。
用scroll-padding-bottom预留安全空间（可选增强）
方法一：CSS原生支持（仅限Safari 15.4+）
在元素上设置：scroll-padding-bottom: env(safe-area-inset-bottom, 0px);
这行代码会自动读取系统底部安全区高度（即地址栏显隐后的实际可用空间），并将其作为滚动锚点偏移量，防止内容被遮挡。注意：该属性不改变fixed/absolute定位逻辑，仅辅助滚动行为。
