为什么使用绝对定位的容器在动画过程中会导致其子元素抖动？

根本原因 #

该抖动的核心诱因是垂直居中的两套计算逻辑和min-height过渡的布局重排步长冲突，具体逻辑如下：

• 你使用top: 50% + transform: translateY(-50%)实现垂直居中时，两个属性的计算规则完全不同：top: 50%基于父容器的固定高度计算，浏览器布局阶段会默认取整为整数像素；translateY(-50%)基于.outer的实时高度计算，支持亚像素级别的渲染精度。
• 过渡min-height的过程中，浏览器每帧都会重排计算.outer的实时高度，两个定位属性的计算基准不一致、取整规则不同，会导致每帧元素的最终渲染位置出现±1px的偏移，累积起来就呈现为视觉上的抖动。
• 你猜测的GPU加速问题不是核心原因，即使强制开启GPU加速，只要两套定位计算的冲突存在，抖动就不会消失。

兼容绝对定位的修复方案 #

不需要修改绝对定位的设定，只要把垂直居中的逻辑统一，避免多属性计算冲突即可，修改后的CSS代码如下：

a {
  display: block;
  width: 300px;
  height: 300px;
  background: lightgrey;
  position: relative;
}

a .outer {
  width: 100%;
  background: green;
  min-height: 40px;
  position: absolute;
  /* 用上下边距自动实现垂直居中，计算逻辑完全由浏览器布局阶段统一处理，不会出现步长冲突 */
  top: 0;
  bottom: 0;
  margin: auto 0;
  transition: min-height 3s ease;
  display: flex;
  align-items: center;
}

a .inner {
  display: block;
  width: 100%;
  height: 40px;
  background: orange;
}

a:hover .outer {
  min-height: 100%;
}

修改后过渡过程中不会再出现抖动，同时保留了绝对定位的需求，兼容所有主流浏览器。

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