iOS Safari下absolute定位元素transition过渡动画异常如何解决？

这个异常是iOS Safari的渲染兼容bug导致的：当同时对top/left定位属性和transform属性应用过渡动画时，Safari的渲染队列会出现时序错乱，优先直接更新top/left的最终定位值，之后才会对transform属性执行过渡，就出现了先跳变再播放部分动画的问题。

方案1：统一使用transform控制所有位移（最优） #

所有位置变化都通过transform实现，避免同时修改定位属性和变换属性，性能更好且无兼容问题：
修改CSS代码如下：

.container{
 background: blue;
 width: 500px;
 height: 500px;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
}

.logo{
  position: absolute;
  /* top/left固定为0，所有位移靠transform实现 */
  top: 0;
  left: 0;
  background: orange;
  /* 初始居中：容器半宽250px减去自身宽度的一半，高度同理 */
  transform: translateX(calc(250px - 50%)) translateY(calc(250px - 50%));
  transition: transform 3s;
}

.logo-move{
  /* 直接位移到左上角1.25rem位置 */
  transform: translateX(1.25rem) translateY(1.25rem);
}

HTML和JS代码无需修改。

方案2：保留原有定位逻辑，新增兼容属性 #

如果不想改动现有定位逻辑，可以给元素添加触发硬件加速和提前声明动画属性的配置，让Safari正确识别过渡队列：
仅修改.logo类的CSS即可：

.logo{
  position: absolute;
  top: 50%;
  left: 50%;
  background: orange;
  /* 新增translateZ(0)触发GPU硬件加速 */
  transform: translateX(-50%) translateY(-50%) translateZ(0);
  /* 显式声明要执行动画的属性，让Safari提前分配渲染资源 */
  will-change: transform, top, left;
  transition: all 3s;
}

两种方案都可以解决iOS Safari下的动画跳变问题，优先选择方案1，动画性能更流畅。

内容的提问来源于stack exchange，提问作者Markus G.