Как исправить эффект прыжка / привязки CSS Hover в MS Edge - PullRequest
Новая
       34

Как исправить эффект прыжка / привязки CSS Hover в MS Edge

0 голосов
/ 17 апреля 2019

Я испытываю странное явление при использовании Microsoft Edge (40.15063.674.0) / Microsoft EdgeHTML (15.15063) с кодом ниже.Как и ожидалось, когда вы наводите курсор на черный ящик в любом браузере, он плавно масштабирует блок в 1,25 раза больше его размера за 0,5 секунды.Проблема возникает, когда мышь слишком быстро перемещается по полю в Edge.В результате вместо плавного масштабирования блок переходит / привязывается к нужному преобразованию, а затем снова возвращается.Допустим, пользователь быстро перемещал свою мышь с одной стороны экрана на другую и, так сказать, «перерезал газон» по всей поверхности коробки.

На самом деле, если я перемещаюсь слишком быстро в других браузерах, окно вообще не пытается масштабироваться.Он остается маленьким, если движение мыши не останавливается в этой области.Даже в Internet Explorer это работает просто так быстро, как я могу перемещать указатель мыши по нему, но только в Edge я могу найти такое поведение.Я должен идти относительно медленно, чтобы не допустить подобной дрожи.Неважно, что это за эффект.Это может быть «scale», «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 движется слишком быстро.

1 Ответ

0 голосов
/ 17 апреля 2019

Это должен быть комментарий, но ниже 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;
}
...