Баг с остатком подчеркивания после наведения, как пофиксить?

Question

[Антон Литвиненко]

Часто в меню я использую кейс, когда при ховере пункт меню подчеркивается псевдоэлементом, который меняет свою ширину с нуля до определенного значения. И практически всегда сталкиваюсь с багом, когда после наведения остается полоска в 1 пиксель шириной.
В процессе тестирования замечено что баг проявляется почти со 100% вероятностью, если рядом у пункта меню подчеркивание есть тоже, настроенное на current страницу. В этом случае немного помогает выставить transition из дефолтного например в ease-out, но не всегда.
Сталкивался кто с фиксом этого явления?

Answer 1

[Александр Епихин]

Можете скинуть ссылку где это можно посмотреть?

Comments

[Антон Литвиненко]

не на всех проектах вышло его увидеть, вот на этом например можно добиться понаводив на пункты меню
https://youth-worker.org.ua/

[Александр Епихин]

На маке удалось воспроизвести только в Safari.
Попробуйте для подчеркивания сделать:

width: 100%;
transform: scaleX(0)

а при hover
transform: scaleX(1)
Сделал это через devtools и больше проблемы не было

[Антон Литвиненко]

Александр Епихин, сорян, что ввел в заблуждение, я дал ссылку где можно увидеть эффект полоски, но это касается не только эффектов с трансформ, в базовом примере только ширина используется, как тут:
https://ajat.se/

[Александр Епихин]

Смысл остается тем же. Делай по-умолчанию width: 100%, а анимируй scaleX. На https://ajat.se/ добавь transform-origin: left . И все должно работать корректно.

[Антон Литвиненко]

Александр Епихин, ваше решение тоже работает, хоть и не так очевиден способ, спасибо

[Александр Епихин]

Это по сути не решение проблемы, а избегание ее. По возможности всегда стоит анимировать только transfrom и opacity.

[Антон Литвиненко]

Александр Епихин, это где такое написано, если не секрет?

[Александр Епихин]

Везде где пишут про производительность анимации.
Например тут

[Антон Литвиненко]

Александр Епихин, принял, спасибо

Answer 2

[Сергей delphinpro]

Баг присутствует. Лечится заданием overflow:hidden для псевдоэлемента (полоски).

Comments

[Антон Литвиненко]

Работает, жму на колокольчик, лайк и репост)

Answer 3

[Максим Комаров]

Приветствую! Тоже сталкивался с данной проблемой в меню не раз, но самое странное, что мне казалось из-за браузера такой баг. Раньше верстал через Yandex и оставались такие частицы, а сейчас через Google Chrome и всё хорошо.

Comments

[Антон Литвиненко]

я работаю в хроме. баг есть

[Сергей delphinpro]

Если вы верстаете в хроме, то не значит, что в Яндексе теперь баг исчез.
Вы просто на него забили ))