添加CSS动画的SVG图片在Safari浏览器无法显示如何解决

• 核心诱因是Safari存在长期未修复的渲染逻辑bug：通过<object>标签嵌入的外部SVG属于跨文档上下文的替换元素，对这类元素应用基于transform的CSS动画时，Safari无法正确计算元素的合成层边界和渲染区域，直接导致元素不显示、被裁剪或错位，Chrome、Firefox不存在该类渲染缺陷。
• 现有代码放大了兼容问题：<object>标签属性中声明了width="150" height="150"，但CSS里仅覆盖了height: 80px，未同步设置width属性，Safari在解析盒模型时会出现宽高计算错配。
• 动画代码未触发独立GPU合成层，动画运行时元素持续在主线程重绘，进一步触发了上述渲染bug。

按落地成本和兼容性优先级排序：

• 方案1（优先选择，无兼容隐患）：替换SVG嵌入标签，放弃<object>改用<img>标签引入SVG，从根源上规避Safari对object元素的动画渲染bug，原有动画逻辑基本不需要调整，示例嵌入代码：

<img
  class="img-sth"
  src="/img/image.svg"
  alt="">

• 方案2（必须保留<object>嵌入方式时使用）：修正CSS写法，强制元素提升为独立合成层，修正盒模型计算：
  1. 在.img-sth样式中补全和height匹配的width属性，不要依赖HTML标签属性设置的宽高，避免盒模型计算错配
  2. 添加will-change: transform和transform: translateZ(0)属性，强制将元素提升到GPU独立合成层渲染，避免主线程重绘时丢失元素内容
  3. keyframes中保留transform的Z轴偏移设置，确保动画全程都在合成层执行
     修正后的参考CSS代码：

.img-sth {
  position: absolute;
  height: 80px;
  width: 80px;
  top: -3px;
  left: 16px;
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: spin-faster 4s linear 0.01s infinite;
  -moz-animation: spin-faster 4s linear 0.01s infinite;
  animation: spin-faster 4s linear 0.01s infinite;
}

@-moz-keyframes spin-faster { 
  100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin-faster { 
  100% { -webkit-transform: translateZ(0) rotate(360deg); } 
}
@keyframes spin-faster { 
  100% { 
    -webkit-transform: translateZ(0) rotate(360deg);
    transform: translateZ(0) rotate(360deg); 
  } 
}

• 方案3：如果SVG文件体积较小、不需要额外的跨上下文交互，可以直接将SVG源码内联到HTML中，不通过外部资源加载的方式引入，也能避开object标签带来的跨上下文渲染问题。

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