Safari 15中fixed底部元素被地址栏顶起，是因视口高度动态变化而fixed定位未重算；应改用position: absolute+父容器100vh/-webkit-fill-available锁定高度，并加transform: translateZ(0)启用GPU加速。
Safari 15 浏览器在滚动时会动态收起或展开底部地址栏，导致视口高度（window.innerHeight）实时变化，而 fixed 元素的定位始终基于初始渲染时的视口尺寸计算，不会随地址栏显隐重排，因此当地址栏突然弹出，就会从下方顶起并遮盖原本紧贴屏幕底边的 fixed 元素。
确认是否为地址栏遮挡而非其他原因
打开页面后先不滚动，观察 fixed 底部元素是否正常显示；再缓慢向下滚动到底部，看元素是否突然上移、被截断或消失。若仅在滚动过程中出现异常，大概率是 Safari 地址栏行为所致——它不是 bug，而是 Safari 对「视觉视口（visual viewport）」和「布局视口（layout viewport）」分离设计的体现。
注意：此现象在 iOS 15.0–15.3 的 Safari 中尤为明显，15.4+ 已优化部分场景，但未彻底移除。
用 position: absolute + 父容器绝对定位替代 fixed
这是 Safari 15 下最稳定、无需 JS 且兼容所有子版本的方案：
- 将底部元素的
position: fixed改为position: absolute； - 确保其父容器（如
<body>或直接包裹它的<div id="app">）设置为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;，此时它将相对于父容器绝对定位，不再受 visual viewport 变化干扰。
这个方案绕开了 fixed 在 Safari 中与地址栏共存时的定位失准问题，因为 absolute 定位锚定的是父容器边界，而父容器本身已用 100vh + -webkit-fill-available 锁死高度，不会随地址栏伸缩抖动。
强制启用硬件加速提升渲染稳定性
即使改用 absolute，Safari 15 在快速滚动时仍可能偶发重绘延迟，让底部元素短暂“卡顿”或错位：
给底部元素添加 backface-visibility: hidden 或 transform: translateZ(0)，触发 GPU 加速图层合成，避免因主线程繁忙导致的定位帧丢失。
【关键前提】 这两个属性必须直接写在底部元素自身上，不能只加在父容器；否则无法隔离该元素的合成层。
配合 scroll-padding-bottom 预留地址栏空间（可选增强）
方法一：CSS 原生支持（Safari 15.4+）
在 html 元素上设置：scroll-padding-bottom: env(safe-area-inset-bottom, 0px);。这不会影响 fixed/absolute 元素位置，但能防止锚点跳转到底部区域时，目标内容被地址栏盖住——属于补充体验，非解决遮挡主因。
方法二：降级适配（Safari 15.0–15.3）
监听 resize 事件，检测 window.innerHeight 变化幅度超过 50px 时，认为地址栏已弹出，动态给底部元素容器加 margin-bottom: 60px（值按实测调整），并在 setTimeout 延迟 300ms 后恢复。此法需谨慎，仅在绝对必要时启用。
