Chrome动画工件

Question

我使用的是一个看起来很好的简单动画，但是会受到一些文物的影响。在this video中，您将在前15秒内看到工件。然后我刷新屏幕，动画似乎工作正常。

如您所见，工件显示为矩形块：

您还可以自己查看该工件，因为它仍然存在our website。它包含以下CSS动画：

animation-name: pulse-border,fade;
animation-duration: 2s,.5s;
animation-delay: 2s,2s;
animation-iteration-count: infinite,1;
animation-direction: alternate,normal;
animation-fill-mode: none,backwards;

该元素的其余部分是：

display: block;
position: absolute;
left: -20px;
top: -20px;
right: -20px;
bottom: -20px;
border: 15px solid white;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
content: '';
z-index: 0;

脉冲边界动画的定义如下：

@keyframes pulse-border {
    0% { transform: scale(1); }
  100% { transform: scale(1.04); }
}

工件不会一直发生。有时它完美无瑕，但有时我会遇到问题。我只在Chrome中看过这个问题，但在OS X和Windows上都是如此。当我在开发人员工具中禁用并启用animation-name时，动画再次正常（但在某些滚动后它可能会再次失败）。

我还创建了一个JSFiddle，但它没有显示这个工件：https://jsfiddle.net/ramondeklein/ggk9vyjx/3/

这个错误已经存在了一段时间，但我还没有找到一个好的解决方法来修复它。