CSS fadeIn动画结束后设置bottom属性的Div轻微右移问题求解

• 基于position: absolute + margin-left: auto + margin-right: auto + left: 0 + right: 0实现Div水平居中，新增bottom: 3px属性实现从底部弹出的交互时，fadeIn动画执行到100%结束的瞬间，Div会出现轻微向右偏移。
• 移除bottom: 3px属性后，动画运行完全正常，无偏移问题。

.header {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  bottom: 3px;
  color: blueviolet;
  background-color: whitesmoke;
  border: 1.4px solid gray;
  width: fit-content;
  padding: 0px 100px 0px 100px;
  border-radius: 5px;
  opacity: 1;
}
.fadeIn{
  animation: fadeIn 2s linear forwards;
}
.fadeOut{
  animation: fadeOut 2s linear forwards;
}
@keyframes fadeIn{
  0% {opacity: 0; transform: translateY(100%);}
  100% {opacity:1; transform: translateY(0%);}
}
@keyframes fadeOut{  
  0% {opacity: 1; transform: translateY(0%);}
  100% {opacity: 0; transform: translateY(100%);}
}

这个偏移是浏览器渲染的子像素舍入误差导致的：

1. 动画执行过程中，元素会被提升到GPU合成层渲染，此时transform属性不会触发重排，居中位置计算不会出现偏差。
2. 当动画执行到100%结束时，transform: translateY(0%)会被浏览器判定为无有效transform偏移，元素会从GPU合成层切回普通渲染流，重新计算margin: auto的左右边距。
3. 由于元素设置了width: fit-content、非整数像素的边框（1.4px）和固定bottom定位，宽度计算时会出现子像素舍入，最终左右margin计算值不等，表现为元素轻微右偏。
   移除bottom: 3px后，元素定位参考系变化，宽度计算不会触发子像素舍入，因此偏移问题消失。

可任选以下一种方案解决：

• 替换居中逻辑：放弃margin:auto的绝对定位居中方案，给定位父级容器设置display: flex; justify-content: center实现水平居中，.header元素移除left:0、right:0、margin-left:auto、margin-right:auto属性，仅保留bottom:3px即可，从根源避免margin自动计算的舍入误差。
• 固定合成层渲染：给.header元素新增will-change: transform属性，强制元素在动画结束后依然保持GPU合成层状态，不触发普通流重排时的边距重计算。
• 规避动态宽度：移除width: fit-content，给元素设置明确的固定宽度值，消除宽度动态计算带来的子像素误差。
• 保留transform状态：把fadeIn关键帧100%节点的transform: translateY(0%)改为transform: translateY(0.02px)，让浏览器始终判定元素存在有效transform属性，不会触发合成层降级。

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