Chrome中使用position: sticky时的亚像素渲染异常问题

问题描述 #

在Google Chrome浏览器中，给Grid布局内的元素设置position: sticky属性后，出现渲染异常：父元素的红色背景会出现在sticky深色头部和下方单元格之间，仿佛两者存在间隙，且父元素执行宽度变化动画时该问题尤为明显。

代码复现 #

CSS代码 #

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: red;
  animation: growShrink 10s infinite alternate ease-in-out;
}

.grid>div {
  padding: 10px;
}

.cell {
  background-color: #ccc
}

.header {
  padding: 10px;
  background-color: #333;
  color: white;
  position: sticky;
  top: 0px;
}

@keyframes growShrink {
  from {
    width: 100%;
  }

  to {
    width: 80%;
  }
}

HTML代码 #

<div class="grid">
  <div class="header">Hello</div>
  <div class="header">Hello</div>
  <div class="header">Hello</div>
  <div class="cell">World</div>
  <div class="cell">World</div>
  <div class="cell">World</div>
</div>

解决方案（保留position: sticky） #

以下几种方法可修复该渲染间隙问题：

• 给sticky元素添加同色底部边框
  给.header添加与自身背景色一致的底部边框，填补渲染间隙：

  .header {
    /* 其他样式不变 */
    border-bottom: 1px solid #333;
  }
  

• 使用同色阴影覆盖间隙
  给.header添加微小的同色阴影，视觉上消除间隙：

  .header {
    /* 其他样式不变 */
    box-shadow: 0 1px 0 #333;
  }
  

• 给Grid容器添加overflow属性
  在.grid中添加overflow: clip（不会触发滚动条），裁剪容器内的异常渲染内容：

  .grid {
    /* 其他样式不变 */
    overflow: clip;
  }
  

• 触发硬件加速强制重渲染
  给.header添加transform: translateZ(0)，利用硬件加速修复浏览器渲染bug：

  .header {
    /* 其他样式不变 */
    transform: translateZ(0);
  }
  

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