Javascript 在Windows Chrome中设置元素移动动画时闪烁 我在Windows Chrome中设置了element.style.left动画

当我使用

requestAnimationFrame

为绝对定位

的

元素.style.left

设置动画时，在Windows 10上的Google Chrome版本77.0.3865.90（官方版本）（64位）中，动画看起来并不平滑

动画元素的前缘会闪烁，看起来很糟糕 div的前缘似乎在移动时消失/闪烁。当它向另一个方向移动时，另一条边将消失/闪烁

在Firefox和Microsoft Edge以及我的移动Chrome上，动画平滑，没有闪烁

完整的代码示例演示该问题 我已经编写了一个简单的演示，它可以将一个div从一边弹到另一边，并显示问题所在

const-element=document.getElementById（'示例'）
左向量=20
var增量=2
函数动画步骤（时间戳）{
如果（左<20 | |左>200）{
增量=-增量
}
左+=增量
element.style.left=（左+'px'）
window.requestAnimationFrame（animationStep）
}
window.requestAnimationFrame（animationStep）

例子
身体{
保证金：0；
背景色：#f0；
}
#范例{
背景色：#fff；
字体系列：Arial；
字体大小：15px；
顶部：50px；
填充：6px；
边框：1px纯黑；
位置：绝对位置；
边界半径：5px；
}
例子
//…如下所示

很多因素都会导致这种抖动，比如您的机器有多忙、浏览器是否硬件加速、机器是否有专用图形、机器是否处于低功耗/电池节电模式等。或者，不要使用JS。用CSS动画代替。我明白你的意思，但我有一台高速机器，带有高端图形卡，而且系统没有加载。动画在Firefox和MS Edge中完美运行。它从未在Chrome中闪烁，但现在它一直闪烁。这是一个简化的示例。完整内容不适用于CSS动画：（作为一个（穷人）解决方法，我发现如果我跳过其他动画帧，闪烁就会停止。这对他们到处都在用硬件加速做的事情来说是非常糟糕的…至少我在过去三周内看到的第三个与HWA相关的bug…因此禁用硬件加速将使它看起来不起作用，但可能会有解决方法，这取决于你的具体情况是什么。在这里你做了一个很好的最小复制，但我想你的情况更复杂。CSS转换和网络动画仍然可以正常工作，所以如果你真的有这样的线性动画，你可以使用这些：，但你可能需要在你的问题中告诉我们。