MacOS与iPadOS版Safari中CSS动画失效问题求助

问题描述 #

我在网站上实现了一个图片动画：从屏幕一端移动到另一端，翻转后返回。对应的CSS代码如下：

#gans {
  padding-top: 9rem;
  position: absolute;
  -webkit-animation: ease-in-out infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 15s;
}
@-webkit-keyframes run {
  0% {
    right: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg);
  }
  50% {
    right: calc(100% - 190px);
    -webkit-transform: rotateY(180deg);
  }
  98% {
    -webkit-transform: rotateY(180deg);
  }
  100% {
    right: 0;
     -webkit-transform: rotateY(0deg);
  }
}

该动画在Edge、Firefox、Chrome及iOS版Safari中运行正常，但在MacOS和iPadOS版Safari中，图片会消失（容器仍正常移动），翻转回来后才重新显示。此前尝试过调整backface-visibility和z-index均无效，将旋转角度±1度时，图片仅显示一半，恳请提供解决建议。

修复方案 #

1. 统一使用合成属性实现动画 #

当前动画同时修改了right（布局属性）和transform（合成属性），Safari渲染引擎在同时处理两类属性时易出现异常。建议用transform: translateX()替代right实现移动，让所有动画逻辑基于合成属性完成：

#gans {
  padding-top: 9rem;
  position: absolute;
  right: 0; /* 初始位置 */
  -webkit-animation: run 15s ease-in-out infinite;
  animation: run 15s ease-in-out infinite;
  transform-style: preserve-3d;
}
@-webkit-keyframes run {
  0% {
    -webkit-transform: translateX(0) rotateY(0deg);
    transform: translateX(0) rotateY(0deg);
  }
  48% {
    -webkit-transform: translateX(0) rotateY(0deg);
    transform: translateX(0) rotateY(0deg);
  }
  50% {
    -webkit-transform: translateX(calc(-100% + 190px)) rotateY(180deg);
    transform: translateX(calc(-100% + 190px)) rotateY(180deg);
  }
  98% {
    -webkit-transform: translateX(calc(-100% + 190px)) rotateY(180deg);
    transform: translateX(calc(-100% + 190px)) rotateY(180deg);
  }
  100% {
    -webkit-transform: translateX(0) rotateY(0deg);
    transform: translateX(0) rotateY(0deg);
  }
}

2. 明确3D变换上下文 #

给动画元素添加transform-style: preserve-3d和显式的backface-visibility，帮助Safari正确识别3D渲染上下文：

#gans {
  /* 原有属性 */
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

3. 强制触发硬件加速 #

添加will-change或translateZ(0)属性，强制Safari启用硬件加速，避免渲染异常：

#gans {
  /* 原有属性 */
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

说明 #

优先尝试方案1，它从根源上避免了布局属性与合成属性的冲突，同时符合现代浏览器渲染优化的最佳实践，兼容性和稳定性最优。

内容的提问来源于stack exchange，提问作者Fritz Dürrwanger