在osx Chrome上跳转的CSS3动画转换

Question

我在OSX和动画动画中遇到了Chrome（第67页）的问题。我准备了JS小提琴： https://jsfiddle.net/5m173ghv/31/

如果你在safari打开它，它的效果非常好。但是，当你使用铬时，它在移动时几乎没有滞后。

我无法再描述一下......你需要打开它并在大屏幕上试试自己......请仔细看看白盒子。您会看到此框有时会出现滞后或小跳（？）......

这很奇怪。我几乎尝试了互联网上的每一个答案（相信我;））。

我也尝试过：

• 更改动画转换到位置（左）
• 将动画更改为过渡
• 添加其他参数（背面可见性，透视图，将会改变...）
• 更改动画序列以获得更多步骤（每10％）
• 调试chrome dev工具（~30-40fps）
• 添加translateZ（0）
等转换

你认为这是铬虫还是我的错？你有什么解决方案吗？

这里有代码：

HTML

<span class="spark"></div>

SCSS

body {
    background-color: black;
}

@keyframes left-to-right {
    0% {
      transform: translate3d(0,0,0);
    }

    100% {
        transform: translate3d(50vw,0,0);
    }
}

.spark {
    position: absolute;
    top: 30px;
    width: 322px;
    height: 500px;
    background-color: white;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    perspective: 1000px;
    animation: left-to-right 5s infinite linear;
    will-change: transform;
    pointer-events: none;
    user-select: none;
}