html - 平滑的@keyframes 动画在 Safari 上变得离散

Question

我为一个网站构建了一个预加载屏幕，其中包含一个使用 CSS @keyframes 设置动画的加载栏。在 Chrome 和 Firefox 上运行良好，但在 macOS Safari 上它变得非常离散。下面是它在 Safari 上的外观演示视频:https://www.youtube.com/watch?v=ODV5lN2xZSI&feature=youtu.be

如您所见，加载栏背景(灰线)和栏本身(黑线)抽动而不是从 0% 宽度平滑地变为 100%。可能是什么问题，这是 Safari 的已知错误吗？最新的 macOS 和 Safari。

@keyframes loading-wrapper-anim {
  0% {
    width:0%;
  }

  100% {
    width:100%;
  }
}


.preloader .loading_wrapper {
  position:absolute;
  width:0%;
  height:1px;
  background:#dbdbdb;
  top:12rem;
  animation: loading-wrapper-anim 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  align-self:flex-start; /*this one is because of the parent element*/
}


.preloader .loading_wrapper .loading_bar {
  height:100%;
  width:0%;
  height:100%;
  background:#000;
  animation: loading-wrapper-anim 3s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

<div class="preloader">
<div class="loading_wrapper">
    <div class="loading_bar">
    </div>
</div>
</div>

预计会有流畅的动画。

谢谢。

Answer 1

您可以尝试通过在动画上添加 translateZ 来强制硬件加速。

.preloader .loading_wrapper {
  position:absolute;
  width:0%;
  height:1px;
  background:#dbdbdb;
  top:12rem;
  animation: loading-wrapper-anim 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  align-self:flex-start; 
  /* Add this */
  -webkit-transform: translateZ(0);
}

JSFiddle

或者，您可以考虑使用 will-change 方法作为更流畅动画的最后手段。 https://developer.mozilla.org/en-US/docs/Web/CSS/will-change