Анимация box-shadow при наведении на элемент создает визуальный сбой на Edge - PullRequest
Новая
       52

Анимация box-shadow при наведении на элемент создает визуальный сбой на Edge

0 голосов
/ 06 июня 2019

Я пытаюсь анимировать тень блока при наведении курсора на элемент, хотя он отлично работает во всех браузерах, он как бы создает сбой на Edge (по-видимому, в случае с IE 11 до Edge 18).

Глюк выглядит как ряд (или столбец) черных штрихов, который обычно появляется только на несколько кадров, рядом с анимированным элементом, но в случайной позиции.

Edge glitch when animating an element by hovering it

Удаление свойства перехода или набора правил: hover решает проблему, но, конечно, это не тот путь.

Вот полный пример для воспроизведения сбоя: 

body {
    background-color: #f5f5f5;
    font-family: sans-serif;
}
ul {
    display: flex;
    list-style: none;
    margin: -5px;
    padding: 0;
}
ul > li {
    cursor: pointer;
    flex: 1 1 auto;
    padding: 20px;
    text-align: center;
    transition: box-shadow .2s ease;
    background-color: #fff;
    box-shadow: 0 6px 28px 2px rgba(112,113,115,0.5), 0 0 0 0 rgba(0,0,0,0.3);
    border-radius: 5px;
    margin: 5px;
}
ul > li:hover {
    box-shadow: 0 6px 28px 2px rgba(112,113,115,0.5), 0 0 0 4px rgba(0,0,0,0.3);
}
<ul>
    <li>test 1</li>
    <li>test 2</li>
    <li>test 3</li>
    <li>test 4</li>
</ul>

Вы можете лучше воспроизвести глюк, если очень быстро наведите курсор на все элементы <li> (кажется, что чем больше ваш компьютер отстает,легче воспроизвести глюк).

Итак, есть ли у вас какие-либо идеи, как это исправить, сохранив при этом переход при наведении?

...