Chrome浏览器中CSS transform过渡结束后1像素偏移问题求助

我之前也碰到过Chrome里这种让人头疼的渲染小bug，尤其是用CSS transition处理下划线类伪元素的时候，确实会出现这种只在特定环境（比如CodePen、独立站点）复现的像素偏移，Firefox因为渲染机制不同就没这个问题。

下面给你几个实测有效的解决思路：

• 给伪元素开启GPU加速：Chrome的GPU渲染有时候能修正像素对齐问题，给你的下划线伪元素加上transform: translateZ(0);，强制触发GPU加速，很多时候能直接解决这种像素跳动的情况。
• 微调transition的属性精度：如果下划线是用height或transform: scaleY()实现的，试试把结束值改成带小数的，比如把height: 1px换成height: 0.99px，或者scaleY(1)改成scaleY(0.99)，让Chrome的渲染引擎计算时更精准。
• 替换下划线实现方式：要是上面的方法没用，可以换个思路做下划线——用border-bottom代替伪元素的height，通过border-width来做transition，这种方式Chrome的渲染兼容性更好，不容易出现偏移。
• 修正行高的基线对齐：有时候行高的整数倍计算在Chrome里和其他浏览器有差异，试试把链接的line-height调整成带小数的数值，比如从1.5改成1.49，让文字和下划线的基线对齐更稳定。

另外，你可以在Chrome开发者工具的「More tools > Rendering」里开启Show paint rectangles，看看偏移发生时元素的重绘区域，能帮你更精准定位问题根源。

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