Что за баг с ховером?

Question

[ponko11]

Добрый день.
https://reliable-flan-335141.netlify.app/
https://github.com/srgunya/bs-2.0
Вообщем баг при срабатывании ховера на ссылках в всплывающем меню, ссылки немного дёргаются, но не все и не всегда, а только при первом наведении.
Есть анимация на всплывающем меню, если из анимации убрать смещение по топу, то баг пропадает

.menu {
    position: fixed;
    top: w(117px);
    width: 100%;
    z-index: 1;
    opacity: 0;
    transition: top .15s ease, opacity .3s ease;
}
.menu_opacity-1 {
    top: w(107px);
    opacity: 1;
}

Comments

[Ankhena]

Скорее баги там скорее в коде.
Ховер это состояние интерактивных элементов.
А у вас висит на li
Вместо того, чтобы изменять размер псевдо (или градиента ссылки) вы меняете размер ссылки. Т.е. сначала текст из неё вываливался, а потом должен вписаться.

[ponko11]

Ankhena, пробовал убрать ховер с размером и оставить только цвет, всё равно дергается

[Ankhena]

ponko11, у меня не дергалось вообще, а вы не рассказали что нужно, чтобы воспроизвести баг.
Фон не влияет ни на какие размеры, значит дерганья вызвать не может.

Я бы предложила вам воспроизвести баг в песочнице на codepen.io
Плюс в том, что с большой вероятностью, сами найдете в чем там дело.

[ponko11]

Ankhena, если навести курсор на ''Новинки'', далее в всплывающем меню навести курсор на ''Все бренды''

[ponko11]

Ankhena, https://codepen.io/Maximenko/pen/KKJQvvY

[Ankhena]

ponko11, там всё тоже самое, ховер продолжает висеть на li и изменяется ширина ссылки.
Я смотрю в опере - ничего не дергается.

[ponko11]

Ankhena, посмотрите ещё раз, плз. Оставил только ховер с цветом шрифта, пробую в хроме, дёргается

[Ankhena]

ponko11, что делать, упрощайте дальше. Убирайте лишние пункты меню, анимашки, ставьте значения в px.

Answer 1

[DENIS Kokorev]

ponko11, вот так сделал. перестало скакать.

.menuCont__link {
    display: inline-block;
}

Заменил на:

.menuCont__link {
    display: flex;
}

Comments

[ponko11]

помогло для ссылок чёрного цвета, но не помогло для самой первый ссылки серого цвета)

[ponko11]

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

[ponko11]

убрал wv педдинги у меню и сделал ссылки дисплей флекс, помогло.
Спасибо большое

[DENIS Kokorev]

помогло для ссылок чёрного цвета, но не помогло для самой первый ссылки серого цвета)

ponko11, Да, тож видел. Но Вы спросили про ссылки, только их и решал.