iOS Safari地址栏收缩时sticky定位元素跳动如何解决

问题原因 #

• iOS Safari的底部地址栏会在页面滚动时自动展开/收缩，这个过程中浏览器视口高度会实时变化。常规写法中top: 50%是基于动态变化的视口高度计算偏移值，地址栏状态一变，top的计算结果就跟着变，直接导致元素位置跳动。
• 另外iOS Safari对sticky定位的百分比偏移计算存在历史兼容问题，即使视口变化最终稳定，百分比值触发的重排也可能出现1-2px的位置偏移。

可行实现方案 #

方案1：纯CSS实现（推荐，兼容iOS 15.4+） #

利用固定视口单位svh（小视口单位，对应地址栏完全收缩后的视口高度，属于固定计算基准，不会随地址栏展开/收缩动态变动）替代百分比计算top值，同时补全Safari需要的sticky前缀：

.sticky-center {
  /* 补全Safari兼容前缀 */
  position: -webkit-sticky;
  position: sticky;
  /* 用固定基准的svh计算垂直位置，不要用百分比 */
  top: 50svh;
  /* 水平+垂直居中，偏移基于元素自身尺寸，不受视口变化影响 */
  transform: translate(-50%, -50%);
  left: 50%;
}

如果需要适配更老的iOS版本，用下面的JS兜底方案。

方案2：CSS+JS兜底（兼容所有iOS版本） #

通过JS捕获地址栏状态稳定后的视口高度，存为全局CSS变量用于偏移计算，避免动态视口变化带来的数值波动：

:root {
  /* 初始化1vh单位值，后续会被JS覆盖为稳定值 */
  --stable-vh: 1vh;
}
.sticky-center {
  position: -webkit-sticky;
  position: sticky;
  top: calc(50 * var(--stable-vh));
  transform: translate(-50%, -50%);
  left: 50%;
}

// 更新稳定视口单位值
function updateStableVh() {
  const vhUnit = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--stable-vh', `${vhUnit}px`);
}
// 页面初始化时执行
updateStableVh();
// 滚动停止300ms后（地址栏动画完全结束）再更新一次值
let scrollTimer = null;
window.addEventListener('scroll', () => {
  if (scrollTimer) clearTimeout(scrollTimer);
  scrollTimer = setTimeout(updateStableVh, 300);
}, { passive: true });
// 屏幕旋转、窗口尺寸变化时同步更新
window.addEventListener('resize', updateStableVh);

避坑注意 #

• 不要用dvh（动态视口单位）设置sticky元素的top值，dvh会实时跟随地址栏状态变化更新，反而会加剧跳动。
• 确保sticky元素的所有父级容器没有设置overflow: hidden，否则会直接导致sticky定位失效，这个问题在iOS Safari下表现尤其明显。
• 测试时注意区分iOS弹性滚动的回弹偏移和sticky本身的跳动，回弹过程中所有固定/粘滞元素都会随页面整体移动，属于浏览器原生交互效果，不需要额外处理。

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