为什么Safari 15浏览器底部的地址栏会遮挡fixed定位元素？

Safari 15 的地址栏问题，搞前端的朋友应该都不陌生。你辛辛苦苦写好的页面，底部导航栏在滚动时突然就“跳”起来了，被地址栏硬生生顶了上去。根本原因其实不复杂：Safari 对视口高度（window.innerHeight）的处理方式，跟其他浏览器不太一样。地址栏一弹出，视口高度就变了，但 fixed 定位的元素还傻傻地守在原来的位置上，结果就是被遮了个严严实实。

这并非什么 bug，而是 Safari 对“视觉视口”和“布局视口”做了分离设计所导致的一个副作用。说白了，地址栏的显隐，视觉上改变了可见区域，但 fixed 元素却没有跟着重新计算。

确认问题根源：是不是地址栏在“捣乱”？

动手改代码之前，先做个快速诊断：打开你的页面，先别急着滚动，看看底部的元素是不是正常显示在屏幕最下方。然后，慢慢往下滚动到底部，如果那个元素突然上移、被截断，或者直接消失了，那十有八九就是地址栏的问题。

需要特别留意一点：这个现象在 iOS 15.0 到 15.3 这几个版本的 Safari 里尤其普遍。15.4 之后 Apple 虽然做了些优化，让部分场景下表现好了些，但并没有从根本上解决这个问题。

方案一：用 position: absolute 替代 fixed

这是目前公认最稳的办法，不需要依赖 Ja vaScript，对 Safari 15 的所有子版本都有效：

1. 先把底部元素的 position: fixed 改成 position: absolute；
2. 把它包在一个父容器里（比如 body 或者页面最外层的
   ），这个父容器要设置成绝对定位：position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;；
3. 重点来了：父容器的高度要写 height: 100vh，同时加上一个兜底属性 min-height: -webkit-fill-a vailable。这一步是为了解决 iOS Safari 旧版本对 100vh 解析不准确的老问题；
4. 底部元素自己保持 bottom: 0; left: 0; right: 0;。这样一来，它的位置是相对于父容器边框来算的。

这个方案的精妙之处在于，绝对定位锚定的是父容器，而父容器的高度已经用 100vh 和 -webkit-fill-a vailable 锁死了，不会再跟着地址栏的伸缩而抖动。

方案二：让硬件加速来“稳住”渲染

即便用了 absolute 定位，在快速滚动时 Safari 15 偶尔还是会出现重绘延迟，底部元素可能会有那么一瞬间的“卡顿”或者位置错位。

解决办法很简单：给底部元素加上 backface-visibility: hidden 或者 transform: translateZ(0)。这两个属性会强制触发 GPU 的图层合成，让底部元素拥有独立的合成层，避免因为主线程忙不过来而导致定位帧丢失。

【关键前提】 这两个属性必须直接写在底部元素本身上，光加在父容器上是没用的。本质上是要让浏览器把这个元素单独拎出来画。

方案三：预留“安全距离”作为补充

如果你的目标是让页面的滚动的行为体验更好，下面两个方法可以作为锦上添花的优化，但不是解决遮挡问题的核心手段。

方法一（针对 Safari 15.4+）：
直接给 html 元素加上 scroll-padding-bottom: env(safe-area-inset-bottom, 0px);。这个 CSS 属性不会改变元素的位置，但能确保页面用锚点跳转到底部时，目标内容不会被地址栏挡住。

方法二（针对 Safari 15.0–15.3）：
如果还是遇到被遮挡的情况，可以监听 resize 事件。一旦 window.innerHeight 的变化幅度超过了 50px，就认为地址栏已经弹出来了。这时动态给底部元素的容器加一个 margin-bottom: 60px，然后延迟 300ms 再恢复。要注意，这个办法属于“外科手术式”的修补，只在万不得已时才建议用。