Mojave Safari14.1.2播放CSS动画时SVG图形消失问题求助

问题成因 #

这是Safari WebKit渲染引擎的已知合成层渲染Bug：当包含绝对定位SVG元素的父元素执行带有scale3d/translate3d这类3D变换属性的CSS动画时，Safari默认不会将内部的SVG元素纳入动画合成层的渲染队列，仅会在动画结束触发全量重绘时才渲染SVG元素，最终表现就是动画播放过程中SVG消失、仅动画结束后显示。
你之前添加带3D transform的虚拟同级元素可以解决问题，本质是这个虚拟元素强制把整个.logo-1容器提升到了独立合成层，连带让内部的SVG也被纳入了合成层渲染链路。

解决方法 #

无需额外添加虚拟DOM元素，仅需要给目标SVG元素手动添加触发独立合成层的CSS属性即可，以下两种方案二选一即可满足你“SVG为.logo-1唯一子元素”的需求：

• 方案1：给SVG添加transform: translateZ(0)，强制触发硬件加速，将SVG纳入合成层渲染队列，该方案兼容性更好
• 方案2：给SVG添加will-change: transform，提前告知浏览器该元素会执行变换类动画，提前预留合成层资源，该方案性能开销更低

修改后的核心CSS代码 #

.logo-1 svg {
  position: absolute;
  top: 0;
  left: 0;
  /* 新增以下任意一行即可 */
  transform: translateZ(0);
  /* will-change: transform; */
}

.logo-1-sequence {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 113px;
  height: 134px;
  transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}

@keyframes kf-frame-1-logo-1-in {
  0% {
    transform: scale3d(0.47, 0.47, 1) translate3d(2078px, 20px, 0);
  }
  100% {
    transform: scale3d(0.47, 0.47, 1) translate3d(1578px, 20px, 0);
  }
}

.logo-1 {
  position: absolute;
  z-index: 2;
  width: 93px;
  height: 150px;
  background-color: red;
  animation: kf-frame-1-logo-1-in 0.5s 0.5s both linear 1;
}

.main {
  background: green;
  position: relative;
  width: 900px;
  height: 150px;
  display: block;
  overflow: hidden;
}

修改后删除虚拟元素的HTML代码依然可以在Safari中正常运行，动画过程中SVG不会消失。

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