Почему текст начинает сдвигаться при наведении на него?

Question

[Ingernirated]

Всем привет!
Подскажите, почему при наведении на текст, он начинает немного сдвигаться(растягиваться) и как от этого избавиться оставив при этом подчеркивание?
https://jsfiddle.net/wLr9vtn1/1/

Comments

[Lander]

Вроде никуда ничего не сдвигается.

[Ingernirated]

Lander, присмотритесь, это не сильно заметно, но на другом шрифте это сильно бросается в глаза из-за его толщины.
Буквально миллиметровый или растягивающийся сдвиг.

[Lander]

Ingernirated, Ну могу только предположить, что это как то связано с округлением координат при растеризации шрифта в момент анимации в вашем браузере.

[Ingernirated]

Lander, https://jsfiddle.net/wLr9vtn1/1/ так лучше видно

[Lander]

Ingernirated, Ну реально нет никакого сдвига. У вас что то либо с монитором, либо с браузером.

[Ingernirated]

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

Answer 1

[Rustam Bainazarov]

Судя по всему, вы смотрите в Chrome. Это графический баг рендеринга. Возможно, связанный с окружающей разметкой и iframe-выводом от JSfiddle. Попробуйте разместить где то ещё.

Comments

[Ingernirated]

https://jsfiddle.net/wLr9vtn1/1/
посмотрите этот пример.
так везде, во всех браузерах!

[Rustam Bainazarov]

Ingernirated, а какое у вас разрешение экрана и ОС?

[Ingernirated]

SmthTo, вин 7, 1440.
при увеличении шрифта, допустим до 50, эффект вроде как вообще не проявляется.

[Rustam Bainazarov]

Ingernirated, эффект проявляется тем сильнее, чем меньше пикселей участвует в процессе (растеризация и всё такое). На большом разрешении (4К при 27 дюймах) я не вижу эффекта. А вот на 1080 при 26 дюймах вижу.

[Ingernirated]

SmthTo, и как с этим бороться?
и вообще, почему он появляется?

[Rustam Bainazarov]

Ingernirated, особенность рендеринга. Когда наводите на элемент, у которого что-то на :hover том же самом — браузер перерисовывает его, обновляет.

[Rustam Bainazarov]

Ingernirated, бороться только одним путём — выводить проблемный элемент из зоны действия перерисовки или же искать какой-то хак.

Я методов не нашёл, как исправлять подобное.

Answer 2

[Владимир Проскурин]

Ну, теоретически, дочерний элемент с абсолютным позиционированием, не может влиять на размеры родительского блока. Вероятно, это баг рендеринга, возможно свойственный только вашему экрану (масштабу), или же системному шрифту.
Часто такие штуки наблюдаются для inline элементов, поэтому предлагаю для родителя поставить inline-block
Посмотрите https://jsfiddle.net/wLr9vtn1/2/

Comments

[Ingernirated]

Пробовал, всё ровно этот нелепый мелкий сдвиг есть.
В этом и беда, что он изначально размещен, как блок и уже подразумевает размеры с условием ещё, что он в абсолютном позиционировании.
Хотя, когда у меня высота меню уменьшается в 2 раза при прокрутке вниз, этот эффект пропадает, хотя изменилась только высота меню, НО! если даже изначально ставить по умолчанию уменьшенное в 2 раза меню, эффект сдвига есть.