Chrome移动端position fixed滚动方向突变时偏移bug如何解决？

原因说明 #

这是Chrome移动端的滚动优化特性导致的已知问题：浏览器默认开启滚动锚定机制，滚动方向突变时会重新计算页面锚点位置，未单独分层的fixed元素会跟随锚点临时偏移，滚动停止后才会触发重渲染回归正确位置。

可落地修复步骤 #

• 第一步：给fixed容器禁用滚动锚定
  添加CSS属性 overflow-anchor: none，直接关闭该元素的滚动锚定触发逻辑。
• 第二步：强制元素提升为单独合成层
  添加CSS属性 transform: translateZ(0) 或者 will-change: transform，开启GPU加速渲染，避免元素随页面滚动层重排发生偏移。
• 第三步：明确fixed定位边界，避免歧义
  顶部固定的元素仅声明 top: 0 不要同时声明bottom，底部固定仅声明 bottom: 0，宽度强制设为 width: 100%，不要依赖内容撑开宽度。
• 第四步：兜底修复（上述方案无效时使用）
  给页面根节点添加样式：

  html, body {
    height: 100%;
    overscroll-behavior-y: contain;
    overflow-x: hidden;
  }
  

完整示例代码 #

/* 你的fixed定位容器 */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  /* 核心修复样式 */
  overflow-anchor: none;
  transform: translateZ(0);
  will-change: transform;
}

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