Jquery 为什么'；我的div不能在所有浏览器中始终跟随我的光标吗？

我有一个圆形div，它跟随光标，当我悬停链接时，它会改变大小/颜色。我对我的代码在Chrome、Brave和Opera浏览器中的工作方式很满意——它很流畅，当鼠标滚动时，它保持不变。然而，在Safari和Firefox中，它的工作并不那么好

在safari中，它非常急促，div落后于光标，而在Firefox中，当光标悬停在链接上时会出现故障。（如果光标快速移动到链接上，圆圈似乎会突然离开并赶上光标）

有人能在我的代码中看到任何明显的错误吗？我对jQuery非常陌生，这是我从教程、试错和stackoverflow上善良的人们的帮助中拼凑出来的

提前感谢您的帮助

更新： 这似乎是转换属性

转换：转换0.1s我添加到了
.circle cursor
，这导致了Safari和Firefox中的故障行为

JSFiddle-


jQuery（文档）.ready（函数（$）{
变量$circle=$（'.circle cursor'）；
var half_cWidth=$circle.width（）/2；
var half_cHeight=$circle.height（）/2；
$（文档）.mousemove（函数（e）{
$circle.css({
转换：'translate（+（e.clientX-half_cHeight）+'px'，+（e.clientY-half_cWidth）+'px）'
});
});
$（“a”）。悬停(
函数（）{
$（“body”）.addClass（“光标悬停”）；
},
函数（）{
$（“body”）.removeClass（“光标悬停”）；
}
);
});
正文{
位置：相对位置；
高度：1000px；
宽度：100%；
保证金：0；
}
a{
浮动：左；
填充：20px；
背景：#efef；
}
.圆圈光标{
位置：固定；
z指数：99999；
-webkit转换：-webkit转换0.1s；
-o-转变：转变0.1s；
转换：转换0.1s；
}
.内圆{
位置：绝对位置；
宽度：40px；
高度：40px；
边界半径：50%；
指针事件：无；
背景色：rgba（0,0,0,0.05）；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
-webkit转换：宽度.2s，高度.2s，不透明度1s，背景色.2s，-webkit转换.2s；
-o过渡：变换.2s，宽度.2s，高度.2s，不透明度1s，背景色.2s；
变换：变换.2s，宽度.2s，高度.2s，不透明度1s，背景色.2s；
}
body.cursor-hover.内圆{
宽度：70px；
高度：70像素；
背景色：rgba（237,85,0,0.5）；
}
我认为存在一些问题：


在firefox中，事件看起来不同，clientX和clientY只能在“OriginaleEvent”中找到，因此直接寻址比让脚本搜索整个事件以查找最终嵌套的属性更快
对于转换，脚本比简单的“顶部”和“左侧”要计算更多（不需要转换时）
圆的宽度和高度为0–当您从“内部圆”获取它时，您得到了它，然后您不需要平移（-50%，-50%）（以及第二个变换）

所以这是更快的：

const half_cWidth = $('.circle-inner').width() / 2;
const half_cHeight = $('.circle-inner').height() / 2;
...
circle.css({
    'top': (e.originalEvent.clientY - half_cHeight) + 'px', 
    'left': (e.originalEvent.clientX - half_cWidth) + 'px'
});

工作示例：


$（文档）.ready（函数（$）{
变量circle=$（'.circle cursor'）；
常数half_cWidth=$（'.circle-inner'）.width（）/2；
常数half_cHeight=$（'.circle-inner'）.height（）/2；
$（文档）.mousemove（函数（e）{
circle.css({
‘top’：（e.originalEvent.clientY-half_cHeight）+‘px’，
“左”：（e.originalEvent.clientX-half_cWidth）+“px”
});
});
$（“a”）。悬停(
函数（）{
$（“.circle inner”）.addClass（“光标悬停”）；
},
函数（）{
$（.circle-inner”）.removeClass（“光标悬停”）；
}
);
});
正文{
位置：相对位置；
高度：1000px；
宽度：100%；
保证金：0；
}
a{
浮动：左；
填充：20px；
背景：#efef；
}
.圆圈光标{
位置：固定；
排名：0；
左：0；
z指数：99999；
-webkit转换：顶部为.1s，左侧为.1s；
-o型过渡：顶部。1s，左侧。1s；
过渡：顶部.1s，左侧.1s；
}
.内圆{
位置：绝对位置；
宽度：40px；
高度：40px；
边界半径：50%；
指针事件：无；
背景色：rgba（0,0,0,0.05）；
-webkit转换：宽度.2s，高度.2s，不透明度1s，背景色.2s；
-o过渡：宽度.2s，高度.2s，不透明度1s，背景色.2s；
过渡：宽度.2s，高度.2s，不透明度1s，背景色.2s；
}
.circle-inner.cursor-hover{
宽度：70px；
高度：70像素；
背景色：rgba（237,85,0,0.5）；
}

translate3d可能会更快。它可以迫使GPU被使用，所以可能会得到更好的性能。嗨，加尔，谢谢你的评论。是的，我想知道translate3d，但我不确定如何添加第三个属性。我尝试了这个-
transform:'translate3d（+（e.clientX-half_-cHeight）+'px'，+（e.clientY-half_-cWidth）+'px），+px）
但是它看起来不对劲，也不起作用-你知道我怎么纠正它吗？你能把'0'作为最后一个参数传递给我：'transform:'translate3d（+（e.clientX-half_-cHeight）+'px++（e.clientY-half_-cWidth）+'px，0'）转换也应用于翻译，因此跟随光标始终延迟0.1s。您可能应该只将转换应用于
宽度
和
高度
嗨，biberman，谢谢您的回答。出于某种原因，当我为
transform
属性设置的转换被添加到
top
和
left
时，在safari中这仍然是一个非常棘手的问题。这是一个JSFIDLE，还有一个圆形尺寸的错误，我在回答中修复了它。现在你不再需要转换了，这个小毛病应该已经消失了……转换比调整左和右更有效，这需要重新布置DOM。我在答案中添加了上和左的转换。请测试一下，因为我既没有safari也没有apple devi