应改用position: absolute替代fixed，父容器设absolute+100vh/-webkit-fill-available锁高，底部栏加transform: translateZ(0)防闪烁，并用scroll-padding-bottom优化滚动锚点。
直接用 position: fixed 做底部栏，在 iOS Safari（尤其是 15.0–15.4）里被地址栏顶起或截断，不是你写错了，是 Safari 动态收放地址栏时，fixed 元素仍按初始视口高度定位，不重算位置。必须换锚点，不能硬调 bottom 值。
用 position: absolute + 父容器锁高替代 fixed
这是兼容性最好、无需 JS、全版本 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;——后者专治旧版 Safari 对100vh解析不准 - 底部栏保持
bottom: 0; left: 0; right: 0;，此时它锚定的是父容器底边，不再随地址栏伸缩抖动 - 必须把
transform: translateZ(0)或backface-visibility: hidden直接写在底部栏元素自身上 - 只加在父容器无效——它不会为底部栏单独创建合成图层
- 这两个声明不解决遮挡，但能避免因主线程渲染延迟导致的视觉跳变
- 在
元素上加：scroll-padding-bottom: env(safe-area-inset-bottom, 0px); - 它读取系统底部安全区（含地址栏显隐后的可用空间），作为滚动目标的偏移基准
- 注意：该属性对
fixed或absolute的定位逻辑无影响，仅调节滚动行为 - 旧版 Safari 不支持，可放心加，无需
@supports包裹 -
body { padding-bottom: 60px }—— 地址栏弹出时 padding 不缩，反而留白或触发横向滚动 -
100vh直接设高度 —— iOS Safari 的100vh包含地址栏，可视区域更小，导致内容被裁 -
will-change: transform或transform: scale(1)加在父容器上 —— 会创建新包含块，让fixed退化为absolute，且锚点错乱 - 把底部栏塞进
flex-direction: column容器再设align-self: flex-end—— 它只是“看起来在下面”，键盘一弹照样飘
加 transform: translateZ(0) 防滚动卡顿和闪烁
Safari 15+ 快速滚动时，即使用了 absolute，底部栏仍可能短暂错位或闪一下：
用 scroll-padding-bottom 辅助滚动锚点（Safari 15.4+）
这一步不修复定位，但能让用户滚动到底部时，内容不被地址栏盖住：
立即学习“前端免费学习笔记（深入）”；
别碰这些“看似能用”的坑
以下做法在真实场景中已被反复验证失效或引发新问题：
真正稳定的解法，是让底部栏彻底脱离「视口锚定」逻辑；一旦依赖父容器这个静态盒子，地址栏伸缩就再不会干扰它。但要注意：如果页面本身有 overflow: hidden 或嵌套了 transform 的祖先，那个祖先就可能成为新的包含块——这种隐式锚点切换，比 visible viewport 变化更难排查。
