如何修复 MS Edge 中的跳跃/捕捉 CSS 悬停效果答案

【问题标题】：How to fix jumping / snapping CSS Hover effect in MS Edge如何修复 MS Edge 中的跳跃/捕捉 CSS 悬停效果
【发布时间】：2019-09-08 02:00:32
【问题描述】：

我在使用 Microsoft Edge (40.15063.674.0) / Microsoft EdgeHTML (15.15063) 和下面的代码时遇到了一个奇怪的现象。正如预期的那样，当您使用任何浏览器将鼠标悬停在黑匣子上时，它会在 0.5 秒内将黑匣子平滑地缩放到其大小的 1.25 倍。当鼠标在 Edge 中的框上移动过快时，就会出现问题。发生的情况是，盒子不是平滑地缩放，而是跳转/捕捉到所需的转换，然后再返回。假设用户正在将鼠标从屏幕的一侧快速移动到另一侧，并“穿过草坪”，可以说是穿过盒子的表面。

事实上，如果我在其他浏览器中移动得太快，盒子根本不会尝试缩放。它只是保持很小，除非鼠标移动实际上最终停止在该区域。即使在 Internet Explorer 中，只要我可以将鼠标指针移过它，它也能正常工作，但只有在 Edge 中我才能发现这种行为。我必须走得相对缓慢，以防止出现类似抖动的快照。效果如何也无所谓。它可能是“比例”、“translateY”等。如果鼠标在“:hover”上移动过快，则在 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 中移动过快，悬停效果会跳跃/捕捉。

【问题讨论】：

我认为这是设计使然。我已经在 Chrome、IE 11 和 Microsoft Edge (42.17134.1.0) / Microsoft EdgeHTML (17.17134) 上测试了您的代码，如果我移动得太快，盒子根本不会尝试缩放。如果我慢慢移动鼠标，它会很好用。
除非 Edge 从 40->42、EdgeHTML 15->17 发生变化，否则当我在我的 Edge 版本中移动光标过快时，框会立即跳转到 1.25 倍比例，而没有这样做需要 0.5 秒。它不仅根本不尝试缩放，它就像它转换但没有应用时间参数（好像它被设置为 0s）。

标签： css hover css-transitions microsoft-edge

【解决方案1】：

这应该是一个评论，但这里的代表低于 50。

您可能想尝试添加 translateZ() 或直接使用 scale3d() 来启用硬件加速，并在悬停少于 100 毫秒时使用 transition-delay 完全延迟过渡。

.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;
}

【讨论】：

你可以像这样解决这个问题：这是一个特定于浏览器的问题，它发生在一个特定的场景中，这可能与浏览器如何优化这些渲染/绘制有关从“折叠”状态转换到“展开”状态并再次返回。它的实际用例价值可能非常有限。我能想到的唯一另一件事是添加一个高达 100 毫秒的 转换延迟（用户无法察觉），这会延迟转换本身。或者更好的是，在动画中使用它并带有延迟。
哈！砰！不直接了解 CSS 中的“transition-delay”。曾用 jQuery 尝试过类似的延迟机制，但没有奏效。谢谢你的主意！已经用这个答案更新了原版。
很高兴它成功了。更新了我的答案以反映这一点。祝你好运！ :)