Safari在选项卡未打开时暂停CSS动画延迟计时器？

我最近遇到了一个问题，CSS动画只有在Safari中运行时才会去同步，但这种情况并不总是发生

经过一段时间的测试，我找到了重现问题的步骤。带有说明的测试用例位于此代码笔中：

我相信Safari会在选项卡失焦时暂停CSS动画延迟，并且当使用交错动画模式时（其中多个元素具有不同延迟的相同动画），失焦暂停会导致动画完全去同步

---

这是预期的行为吗？到目前为止，我只在狩猎中遇到过这种情况。有解决办法吗？

发布我找到的解决方案，希望有人会发现它有用

当safari选项卡失去焦点时，只有等待其

动画延迟完成的动画才会取消同步。所有这些动画，不管它们的
动画延迟
值是多少，都将同步在一起。因此，已经运行的动画组将与等待其动画延迟的动画组解除同步

解决方案是通过添加负的
动画延迟
值来错开动画。这样，当页面加载时，所有动画都会启动，事实上，它们会被视为运行一段时间以匹配负延迟

下面是一个相同的示例，修复了负延迟：
在Safari中暂停动画，使选项卡失去焦点是预期行为。然而，动画帧的去同步似乎是Safari的一个缺陷。我认为这是由于
动画延迟造成的。
<!-- example html -->
<span class="animation">
    <span>AAAAAAAAA</span>
    <span>BBBB</span>
    <span>CCCCCCC</span>
    <span>DDDDDDD</span>
    <span>EEEEE</span>
</span>

// example scss
.animation {
  display: inline-block;
  width: 100%;
  text-align: center;
    font-size: 3em;
  span {
    position: absolute;
    left: 0;
    right: 0;
    animation-name: fadeOutIn;
    animation-duration: 6s;
    animation-iteration-count: infinite;
  }
}

.animation span {
    animation-duration: 10s;
    animation-iteration-count: infinite;
    opacity: 0;
    &:first-child {
        opacity: 1;
    }
    &:nth-child(2) {
        animation-delay: 2s;
    }
    &:nth-child(3) {
        animation-delay: 4s;
    }
    &:nth-child(4) {
        animation-delay: 6s;
    }
    &:nth-child(5) {
        animation-delay: 8s;
    }
}

@keyframes fadeOutIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  5% {
    opacity: 1;
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  25% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}