iOS 15.3及以上版本Loading icon不旋转问题求助

针对性修改方案 #

• 强制启用硬件加速：给动画元素添加transform: translateZ(0)或will-change: transform，iOS 15.3+的Safari对部分动画会默认跳过硬件加速，强制开启可修复渲染异常
• 规范动画属性写法：
  1. 明确设置transform-origin: 50% 50%，避免Safari默认值导致的动画偏移或失效
  2. 将负角度旋转替换为正角度+反向动画，比如把rotate(-360deg)改成rotate(360deg)并设置animation-direction: reverse，部分高版本Safari对负角度解析存在兼容性问题
  3. 补全完整的webkit前缀，包括@-webkit-keyframes和-webkit-animation，不要仅给transform属性加前缀
• 隔离样式冲突：检查loading元素是否受position: fixed、overflow: hidden等属性影响，可将其放入独立容器中，减少外部样式干扰

修正后的示例CSS代码 #

.loading-icon {
  width: 40px;
  height: 40px;
  border: 4px solid #eee;
  border-top-color: #007aff;
  border-radius: 50%;
  /* 强制硬件加速 */
  will-change: transform;
  transform: translateZ(0);
  /* 完整webkit前缀动画 */
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
  /* 明确变换原点 */
  transform-origin: 50% 50%;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

额外排查点 #

• 检查用户是否开启iOS Safari的减少动态效果功能（设置-辅助功能-动态效果-减少动态效果），该功能会禁用部分动画，可提示用户关闭，或通过@media (prefers-reduced-motion: no-preference)做适配
• 确认loading元素不是display: inline，块级或行内块级元素才能正常应用transform动画

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