CSS实现sticky吸顶header时Chrome滚动内容1px抖动问题求解

Chrome浏览器对sticky元素的默认渲染走普通重绘流程，滚动触发吸顶/脱离状态切换时的亚像素对齐计算、滚动容器尺寸偏差会导致1px视觉抖动，属于Chrome内核的常见渲染问题。

按优先级逐一尝试以下修改即可解决：

• 方案1：给sticky元素开启硬件加速，强制放到单独合成层渲染
  给.header选择器添加will-change: transform属性，对性能影响最小，是最优修复方案
• 方案2：统一宽度单位，消除横向尺寸偏差
  将.content的width: 100vw改为width: 100%，避免100vw包含滚动条宽度导致的像素对齐错误
• 方案3：移除不必要的定位声明
  删除html、body选择器里的position:relative，避免干扰sticky元素的定位基准计算

CSS代码 #

@import url("https://fonts.googleapis.com/css?family=Roboto:100");
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
}

h1 {
  letter-spacing: 3px;
  margin: 0;
  padding-left: 10px;
  padding-top: 10px;
  color: #fff;
  font-weight: 100;
}

.header {
  width: 100%;
  height: 50px;
  position: sticky;
  top: 0px;
  will-change: transform; /* 新增修复属性 */
}

.header:nth-of-type(1){
   background-color: dodgerblue;
}

.header:nth-of-type(2){
   background-color: rebeccapurple;
}

.header:nth-of-type(3){
   background-color: chartreuse;
}

.content {
  width: 100%; /* 原100vw修改为100% */
  height: 100vh;
  background: linear-gradient(70deg, orange, crimson);
  padding-top: 50px;
}

.header-2{
  top: 50px;
}

.header-3{
  top: 100px;
}

HTML代码（无需修改） #

<section>
<header class="header"><h1>HEADER 1</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header header-2"><h1>HEADER 2</h1></header>
<div class="content"><h1>CONTENT</h1></div>
<header class="header header-3"><h1>HEADER 3</h1></header>
<div class="content"><h1>CONTENT</h1></div>
</section>

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