iOS设备CSS翻转动画局部异常问题求助（仅Safari/iOS出现）

问题背景 #

给站点的「促销」徽章添加了X轴翻转动画，桌面端、安卓设备上运行都正常，但在iPhone的Safari浏览器中，首页「Top Android Cases」板块里只要两个带促销徽章的产品相邻，徽章动画就会出现异常，安卓设备无此问题，可判定为Safari/iOS兼容性bug。

当前使用的动画代码：

animation: 5s anim-flipX ease infinite;

@keyframes anim-flipX { 
  0% { transform: rotateX(90deg); } 
  50% { transform: rotateX(720deg); } 
  100% { transform: rotateX(720deg); }
}

问题原因 #

Safari对3D变换的渲染逻辑和其他浏览器存在差异，当相邻元素同时执行3D动画时，容易触发渲染层冲突或合成层优化bug，导致元素渲染异常。

修复方案 #

1. 补全3D变换上下文属性 #

给徽章元素或其父容器添加3D空间相关属性，强制Safari正确处理3D变换的渲染环境：

.promo-badge {
  animation: 5s anim-flipX ease infinite;
  /* 新增兼容属性 */
  transform-style: preserve-3d;
  perspective: 1000px;
  backface-visibility: hidden;
}

2. 优化动画关键帧旋转角度 #

将关键帧中的720deg替换为360deg，减少大角度累积旋转带来的渲染压力，同时保证动画效果基本一致：

@keyframes anim-flipX { 
  0% { transform: rotateX(90deg); } 
  50% { transform: rotateX(360deg); } 
  100% { transform: rotateX(360deg); }
}

3. 触发硬件加速隔离渲染层 #

给徽章元素添加translateZ(0)和will-change属性，让Safari单独为徽章分配硬件加速合成层，避免相邻元素的渲染干扰：

.promo-badge {
  transform: translateZ(0);
  will-change: transform;
}

验证方法 #

修改代码后，使用iPhone的Safari访问首页「Top Android Cases」板块，找到两个相邻带促销徽章的产品，检查动画是否恢复正常运行。

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