在Windows Chrome中为元素移动设置动画时闪烁

Question

我已经在Windows Chrome浏览器中为element.style.left设置了动画

当我使用requestAnimationFrame为绝对定位的element.style.left的{​​{1}}设置动画时，动画在Google Chrome版本77.0.3865.90（正式版）中显得不流畅（64-位）在Windows 10上。

动画元素的前沿闪烁并看起来很糟

div的前沿在移动时似乎消失/闪烁。当它朝另一个方向移动时，另一边缘消失/闪烁。

在Firefox和Microsoft Edge以及我的移动Chrome浏览器中，动画很流畅，没有闪烁。

完整的代码示例来演示此问题

我编写了一个简单的演示，该演示从一边跳到另一边并显示了问题。

<div>

const element = document.getElementById('example')
var left = 20
var increment = 2

function animationStep(timestamp) {
  if (left < 20 || left > 200) {
    increment = -increment
  }
  left += increment
  element.style.left = (left + 'px')
  window.requestAnimationFrame(animationStep)
}

window.requestAnimationFrame(animationStep)

我做错什么了吗？

有人知道Windows 10上的Chrome发生了什么吗？我的代码有问题吗？如果没有，是否有任何良好的工作方法来阻止闪烁？我唯一能想到的就是将div放在一个不可见背景的较大div中。由于各种原因，我不想使用CSS动画。