我使用Microsoft Edge（40.15063.674.0）/ Microsoft EdgeHTML（15.15063）和下面的代码遇到了一个奇怪的现象。正如预期的那样，当您使用任何浏览器将鼠标悬停在黑匣子上时，它会在0.5秒内将盒子平滑地缩放到其大小的1.25倍。当鼠标在Edge中移动太快时，会出现问题。所发生的是，不是平滑地缩放，而是跳转/捕捉到所需的转换，然后再返回。假设用户正在将鼠标从屏幕的一侧快速移动到另一侧，并且“穿过草坪”，可以说是在盒子的表面上。
事实上，如果我在其他浏览器中移动太快，该框根本不会尝试扩展。它只是保持小，除非鼠标移动实际上最终在该区域停止。即使在Internet Explorer中，这也可以正常工作，因为我可以将鼠标指针移动到它上面，但只有在Edge中才能找到这种行为。我必须走得相对慢，以防止像抖动一样。效果是什么并不重要。它可能是一个“比例”，一个“translateY”等。如果鼠标在“：悬停”中移动得太快，它在Edge中不会很平滑。这是一个已知的问题？有什么我可以做的，以防止这种情况发生？
<!DOCTYPE html>
<style>
.box {
background-color: #000;
cursor: pointer;
position: absolute;
left: 200px;
top: 200px;
height: 200px;
width: 200px;
transition: transform 0.5s;
transition-delay: 0.1s; <=== Added this to stop it from jumping
}
.box:hover {
transform: scale(1.25);
}
</style>
<div class="box"></div>
我甚至尝试使用jQuery的“.hover”函数复制效果，以便在鼠标进入时添加CSS属性，然后在鼠标离开时将其取走但无效。它的行为方式完全相同。如果鼠标在Edge中移动太快，则悬停效果会跳跃/捕捉。
这应该是一个评论，但在这里低于50代表。
您可能希望尝试直接添加translateZ（）或使用scale3d（），以启用硬件加速，并在悬停小于100毫秒时使用转换延迟来完全延迟转换。
.box:hover {
transform: scale3d(1.25, 1.25, 1.25);
transition-delay: 0.1s;
}
/* or */
.box:hover {
transform: translateZ(0) scale(1.25);
transition-delay: 0.1s;
}