Question

使用Microsoft Edge（40.15063.674.0）/ Microsoft EdgeHTML（15.15063）和下面的代码时，我遇到一种奇怪的现象。不出所料，当您使用任何浏览器将鼠标悬停在黑匣子上时，它会在0.5秒内将其平滑缩放到其大小的1.25倍。当鼠标在Edge中的框中移动得太快时，就会发生此问题。发生的是，框没有平滑缩放，而是跳转/捕捉到所需的转换，然后再次返回。假设用户正在将鼠标从屏幕的一侧快速移动到另一侧，并“在草坪上切开”，这样可以说是在盒子的整个表面上说话。

实际上，如果我在其他浏览器中移动得太快，则此框根本不会尝试缩放。除非鼠标移动实际上最终停止在该区域内，否则它将保持很小。即使在Internet Explorer中，只要将鼠标指针移到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中移动得太快，则悬停效果会跳转/捕捉。

Answer 1

这应该是评论，但此处低于50。

您可能希望尝试添加translateZ（）或直接使用scale3d（）来启用硬件加速，并在悬停时间少于100ms时使用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;
}

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

1 个答案: