Chrome内核浏览器中元素透明度变化时滚动条交替消失重现问题

这是Chromium内核的已知渲染bug，触发条件和非整数像素尺寸、绝对定位元素的透明度变化、替换元素（img）的渲染逻辑三者相关：

1. container设置了248.5px的非整数高度，内容实际高度和容器高度的差值刚好落在半像素区间，Chromium默认判定为溢出，生成垂直滚动条
2. 当overlay的opacity变为1时，绝对定位的全不透明元素会触发Chromium的重排逻辑，此时引擎错误计算了内容总高度，判定为没有溢出，因此移除滚动条；opacity变回0时重排恢复正确判定，滚动条重新出现，就出现了反复闪烁的现象
3. 两个特殊现象的对应逻辑：
   • 普通div不是替换元素，渲染时的像素对齐规则和img不同，不会触发半像素溢出的判定
   • opacity小于1的元素会被Chromium放入独立合成层渲染，不会触发这个错误的重排计算逻辑，因此滚动条不会消失

以下修复方式可按需选择：

• 方案1：将容器高度调整为整数，避免半像素判定问题，兼容性最好
  代码修改示例：

  .container {
    width: 600px;
    height: 249px; /* 从248.5px改为整数即可 */
    overflow: auto;
    overflow-x: hidden;
  }
  

• 方案2：强制触发合成层渲染，规避错误的重排计算，不需要改动原有尺寸
  代码修改示例：

  .img-with-overlay {
    position: relative;
    overflow: hidden;
    width: 100%;
    transform: translateZ(0); /* 新增这行，强制硬件加速进入合成层渲染 */
  }
  

• 方案3：给overlay明确设置和父容器一致的宽高，避免高度计算偏差，适合需要保留半像素尺寸的场景
  代码修改示例：

  .overlay {
    position: absolute;
    inset: 0; /* 等价于top/right/bottom/left均为0，宽高和父级完全一致 */
    opacity: 0;
  }
  

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