为何计算后为小数的line-height会导致CSS height过渡时文本抖动？

现象描述 #

使用CSS height 过渡修改元素高度时，全站文本出现抖动，经定位问题根源是计算后为小数的line-height值。

复现示例（抖动场景） #

CSS #

.hover {
  height: 20px;
  overflow: hidden;
  transition: height 1s ease;
}
.hover:hover {
  height: 100px;
}
p {
  font-size: 15px;
  line-height: 1.3;
  /* 计算后line-height为19.5px —— 小数 */
}

HTML #

<div class="hover">
Hover over me<br>
foo bar<br>
foo bar<br>
foo bar<br>
</div>
<p class="shake">
  I will shakeI will shakeI will shake <br>
  I will shake I will shakeI will shake<br>
  I will shake I will shakeI will shake<br>
  I will shake I will shakeI will shake<br>
  I will shake I will shakeI will shake<br>
</p>

对比示例（无抖动场景） #

CSS #

.hover {
  height: 20px;
  overflow: hidden;
  transition: height 1s ease;
}
.hover:hover {
  height: 100px;
}
p {
  font-size: 15px;
  line-height: 1.2;
  /* 计算后line-height为18px —— 整数 */
}

HTML #

<div class="hover">
Hover over me<br>
foo bar<br>
foo bar<br>
foo bar<br>
</div>
<p class="shake">
  I will shakeI will shakeI will shake <br>
  I will shake I will shakeI will shake<br>
  I will shake I will shakeI will shake<br>
  I will shake I will shakeI will shake<br>
  I will shake I will shakeI will shake<br>
</p>

成因分析 #

浏览器无法精确渲染亚像素级的文本位置：当line-height计算后为小数时，浏览器会对文本位置进行亚像素对齐或四舍五入。在height过渡的持续重排过程中，浏览器需要频繁调整文本的亚像素定位，这种频繁的位置波动就表现为视觉上的文本抖动。部分浏览器渲染引擎（如Chrome的Blink）在动态布局变化时，会反复重新计算文本基线，小数line-height会进一步放大这种波动。

保留小数line-height的解决方案 #

以下方法可在保留设计所需的小数行高效果的同时，解决抖动问题：

1. 开启硬件加速 #

给抖动文本元素添加transform: translateZ(0)，让浏览器将元素放到GPU层渲染，避免频繁重排导致的位置波动：

p.shake {
  transform: translateZ(0);
}

2. 提前告知浏览器优化策略 #

给文本容器添加will-change: contents，让浏览器提前为内容变化做好渲染优化：

p.shake {
  will-change: contents;
}

3. 直接设置像素级line-height #

如果需要精确的小数行高，直接设置像素值（如19.5px），同时给父容器添加font-size: 0再重置子元素字体大小，减少布局计算误差：

.text-container {
  font-size: 0;
}
p.shake {
  font-size: 15px;
  line-height: 19.5px;
}

4. 稳定字体渲染 #

启用font-display: optional，减少字体加载过程中的布局偏移，稳定文本基线位置：

@font-face {
  font-family: 'YourFont';
  src: url('your-font.woff2') format('woff2');
  font-display: optional;
}

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