iOS 15 Safari移动端fixed固定元素在底部栏消失时跳转问题求解

问题原因 #

这个是Safari独有的滚动渲染优化策略导致的：Safari为了提升滚动流畅度，滚动过程中不会实时重绘fixed定位元素的尺寸/位置，直到滚动动作完全停止才会触发更新，所以会出现侧边栏滞后填充空白的问题。你之前尝试的方案无效的核心原因如下：

• 100vh 在Safari中是固定值，不会随底部工具栏的显隐动态调整，会导致侧边栏被工具栏遮挡
• -webkit-fill-available 对fixed定位元素生效是Safari长期存在的已知bug
• 绑定window.innerHeight的方案如果监听的是window.resize事件，Safari滚动过程中工具栏变化不会触发该事件，所以更新滞后

可行解决方案 #

方案1：纯CSS替换定位逻辑（推荐，无性能损耗）

用position: sticky替代fixed定位，规避Safari对fixed元素的重绘限制，无需JS介入：

/* 侧边栏父容器，作为body直接子元素放置 */
.sidebar-wrapper {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-width: 17em;
}

.sidebar {
  /* 移除原有的fixed定位属性 */
  width: 100%;
  height: 100%;
}

方案2：保留fixed定位，强制触发实时重绘

如果业务逻辑必须用fixed定位，可以通过开启GPU加速强制Safari实时重绘元素，配合visualViewportAPI实现高度精准适配：

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 17em;
  height: 100%;
  /* 无视觉影响的transform开启GPU加速，强制滚动时实时重绘 */
  transform: translateZ(0);
}

如果以上调整还是存在滞后，补充JS监听视口变化实现实时更新：

if (window.visualViewport) {
  // 监听视口动态变化，比window.resize触发更及时准确
  window.visualViewport.addEventListener('resize', () => {
    document.querySelector('.sidebar').style.height = `${window.visualViewport.height}px`;
  });
  // 初始化高度
  document.querySelector('.sidebar').style.height = `${window.visualViewport.height}px`;
}

内容的提问来源于stack exchange，提问作者Fred K