如何防止设置transform变换过渡的元素生效时出现尺寸变化？

• 为部分元素配置了150ms的transition过渡，同时设置hover状态下的transform: translateY()位移动效
• 异常表现：transform动画执行过程中，元素出现疑似尺寸改变的像素错位、抖动问题
• 异常效果参考：
  

这是前端交互动画里非常常见的子像素渲染抖动问题，核心诱因有三类：

1. 动画元素没有被提升到独立合成层，动画过程中浏览器需要持续重新计算元素布局、栅格化，非整数像素位置的渲染会导致元素边缘出现模糊、拉伸的视觉错觉，短时长动画下感知会格外明显
2. 过渡属性配置不严谨，误将width、padding、margin等会触发重排的属性纳入过渡范围，动画过程中元素实际盒模型尺寸发生了非预期的细微变化
3. translateY的位移值使用了rem、em等相对单位，最终计算值为非整数像素，触发子像素渲染偏差

按优先级依次尝试即可：

• 强制将动画元素提升到独立合成层，开启GPU加速，从根源避免重排重绘带来的计算偏差，给目标元素添加如下CSS：

.target-btn {
  /* 现代浏览器最优写法，提前告知浏览器该元素会有transform变化 */
  will-change: transform;
  /* 兼容旧版浏览器的兜底提升方案 */
  transform: translateZ(0);
  backface-visibility: hidden;
}

注意：will-change不要全局滥用，仅给实际需要执行transform动画的元素添加即可，避免无意义占用设备显存。

• 显式指定过渡属性，禁止使用transition: all的写法，避免非预期属性被加入动画：

/* 不推荐 */
transition: all 150ms ease;
/* 推荐：明确仅过渡需要的transform属性 */
transition: transform 150ms ease;

• 调整translateY的位移值，尽量使用整像素单位（比如translateY(-2px)），避免使用会计算出小数像素的相对单位值，减少子像素渲染触发概率
• 如果以上方案处理后仍有极轻微的边缘抖动，可以给元素添加1px透明边框做兜底，避免边缘像素被裁切导致的视觉尺寸偏差：

.target-btn {
  border: 1px solid transparent;
}

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