Javascript 如何消除铬合金上的抖动运动

我是我父亲网站的开发者。昨天，我用香草Javascript和CSS制作了这个自定义游标：

开发完成后，我在我的webapp上进行了测试

Firefox：没问题，代码运行得很好，非常棒

在Chrome上：我遇到了第一个问题，有时候自定义光标会抖动，我不知道如何重现这个bug。。。 我只收到过一次这个bug，但今天，我把我的代码分享给朋友，其中一个说我“看代码有bug”

错误示例：

现在，我有两个问题：

如何修补错误

及

如何改进代码以使其更好

谢谢你的帮助

const cursor=document.querySelector（'.cursor'）；
document.addEventListener（'mousemove'，e=>{
setAttribute（“style”，“top:”+（e.pageY-10）+“px；left:”+（e.pageX-10）+“px；”）
})
document.addEventListener（'click'，（）=>{
cursor.classList.add（“展开”）；
设置超时（（）=>{
cursor.classList.remove（“展开”）；
}, 500)
})

正文{
保证金：0；
高度：100vh；
//光标：无；
背景：rgb（27,27,27）；
}
.光标{
宽度：20px；
高度：20px；
边框：1px实心#FAB313；
;
边界半径：50%；
位置：绝对位置；
过渡时间：200ms；
过渡定时功能：缓解；
动画：cursorAnim.5s无限交替；
指针事件：无；
}
.cursor：：之后{
内容：“；
宽度：20px；
高度：20px；
位置：绝对位置；
边框：8px实心#FAB313；
;
边界半径：50%；
不透明度：.5；
顶部：-8px；
左：-8px；
动画：cursorAnim2.5s无限交替；
}
@关键帧cursorAnim{
从{
变换：比例（1）；
}
到{
变换：比例（.7）；
}
}
@关键帧cursorAnim2{
从{
变换：比例（1）；
}
到{
变换：缩放（.4）；
}
}
@关键帧cursorAnim3{
0% {
变换：比例（1）；
}
50% {
变换：尺度（3）；
}
100% {
变换：比例（1）；
不透明度：0；
}
}
.扩大{
动画：光标3.5s向前；
边框：1px实心#1E2648；
}

---

由于我无法在Chrome上重现该问题，我认为您可以尝试通过使用

变换
属性移动光标（而不是
顶部
和
左侧
属性）和
将改变
属性来提高整体性能

因为您已经在脉冲动画中使用了该属性，所以我插入了一个包装器元素，并在那里应用了
变换


const cursorW=document.querySelector（'.cursor wrapper'）；
const cursor=document.querySelector（'.cursor'）；
document.addEventListener（'mousemove'，e=>{
cursorW.setAttribute（“样式”，
转换：转换（“+（e.pageX-10）+”px“+（e.pageY-10）+”px）”）
})
document.addEventListener（'click'，（）=>{
cursor.classList.add（“展开”）；
设置超时（（）=>{
cursor.classList.remove（“展开”）；
}, 500)
})
正文{
保证金：0；
高度：100vh；
//光标：无；
背景：rgb（27,27,27）；
}
.光标包装器{
改变：转变；
转换：转换.25s 0s；
}
.光标{
宽度：20px；
高度：20px；
边框：1px实心#FAB313；；
边界半径：50%；
位置：绝对位置；
过渡时间：200ms；
过渡定时功能：缓解；
动画：cursorAnim.5s无限交替；
指针事件：无；
}
.cursor：：之后{
内容：“；
宽度：20px；
高度：20px；
位置：绝对位置；
边框：8px实心#FAB313；；
边界半径：50%；
不透明度：.5；
顶部：-8px；
左：-8px；
动画：cursorAnim2.5s无限交替；
}
@关键帧cursorAnim{
从{
变换：比例（1）；
}
到{
变换：比例（.7）；
}
}
@关键帧cursorAnim2{
从{
变换：比例（1）；
}
到{
变换：缩放（.4）；
}
}
@关键帧cursorAnim3{
0% {
变换：比例（1）；
}
50% {
变换：尺度（3）；
}
100% {
变换：比例（1）；
不透明度：0；
}
}
.扩大{
动画：光标3.5s向前；
边框：1px实心#1E2648；
}
我对你的笔做了一点修改，它可能可以根据你的需要工作：

您遇到的主要问题是移动
上/左
。对于此类任务，有一个
转换
，在您的情况下，您需要
translate3d
。这里有一篇关于这个主题的文章：.
在Chrome（79）中非常适合我@JeremyThille，我不知道为什么，但是这个bug有随机的骇客，这就是为什么很难调试的原因。。在Chrome 80.0.3987.87上，也许1/10的时间对我来说是完美的。你能找到更多的复制方法吗？它与点击或只是移动有关吗？@Boris这是我的问题之一：我不知道如何复制，我只得到过一次，现在，只有我随机的朋友说我“它在窃听”这个窃听器只在移动中你提到的代码运行在“webapp”中，这只是一个网页还是你把它嵌入了其他地方？您是否曾在codepen中或仅在您的“webapp”中看到错误？您的代码非常酷，但单击动画已被删除..：/@FabrizioCalderan在点击时似乎有点问题移动鼠标并多次点击。小点在跳，我看不出有什么不同。我也在firefox上使用chromebut，我看不出这两个例子有什么不同。老实说，我没有注意到任何奇怪的行为谢谢，现在如何添加滞后跟随鼠标效果？嗯，出于某种原因，我决定不需要滞后=）我通过添加一个过渡更新了笔！编辑：你的想法很酷，但现在无法与链接（单击不起作用）和光标：指针的一些错误交互：/很难预测你需要什么，我解决了这个问题，如果你提供任务的所有必要信息，也许我会帮你解决这些错误。我很抱歉