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

Question

[Giorgos]

Здравствуйте!

Прошу помощи: на моём сайте (Вордпресс) при наведении на некоторые ссылки происходит лёгкое смещение (сдвиг) ссылки и возврат на место. Но это происходит не каждый раз.

Проблема не с конкретным плагином, т. к. глючат ссылки от разных плагинов. Прикрепил скрин, в каких зонах я это замечал. А также прикрепил гифку — там слабый эффект смещения виден при наведении (трудно поймать этот момент, чтобы наглядно показать). Но на некоторых ссылках может на долю секунды высота поджаться и вернуться. Там это значительно заметнее.

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

Вот рандомная статья с сайта, где есть подобные ссылки: https://litfan.ru/poleznye-resursy-dlya-pisatelej/...

Буду признателен за помощь!

Comments

[Артем Золин]

Ссылка у сайта есть?

[Giorgos]

Артём, прикрепил) Через кнопку «Вставить ссылку», почему-то, не отобразилась. Пришлось напрямую.

[Артем Золин]

В каком-то конкретном браузере возникает проблема?

[Giorgos]

Артем Золин, в Гугл Хром точно возникает (там и делал гифку). В других браузерах не тестил. Иногда это смещение присходит при первом наведении на ссылку, а иногда нужно страницу пообновлять / открыть другие статьи / понаводить на другие ссылки. Поэтому и не понимаю, как возможно нестабильное возникновение смещения.

На всякий случай укажу: разрешение экрана 1366х768.

[I Phoenix I]

Уже второй вопрос от вашего лица и тоже связан с wordpress.
Может стоит выбросить wordpress и писать сайт нормально ?
Как вариант :)

[strelok011]

I Phoenix I, тут проблема не в вордпрессе а в купленной (ну или еще какой) теме с ненужными свистелками/перделками поверх базового функционала. Те же кастомные шрифты...

Giorgos, у меня вопрос - раз уж есть компилированные стили, то почему бы не выпилить из боди базовый кастомный шрифт Playfair Display, который переопределяется поверх аж два раза, сначала стилями прямо в html а потом и в том же css? Не говоря о большом количестве копипасты с ненужными переопределениями атрибутов. На слабом процессоре этот перебор определяющих правил тоже может повлиять на дергание.

Чтобы избежать скачков рендера - можно попробовать на стиль ссылки докинуть transform: translate3d(0,0,0);

так же может влиять опция text-rendering: optimizeLegibility, стоит поэкспериментировать, пруфы тут https://www.frontender.info/text-rendering/

[Giorgos]

I Phoenix I, я не программист, поэтому пользуюсь готовыми вариантами и учусь их менять под себя)

[Giorgos]

strelok011, спасибо за советы, протестю сейчас!

По поводу базового кастомного шрифта и прочих ненужных стилей: там много что нужно удалить, т.к. в теме изначально используются собственные стили + стили bootstrap. И бОльшая часть незадействована.

Я пытался искать готовые решения для выявления лишних стилей, но идеального решения не нашёл - что-нибудь важное да пометит лишним. Поэтому забил)

[strelok011]

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

[Giorgos]

strelok011, попробовал поставить transform: translate3d(0,0,0); (а также тестил webkit-transform: translate3d(0,0,0);) на все ссылки в обычном состоянии + hover. Стили применились, ничего их не перекрывало, но проблема осталась. Кэш перед этим чистил.

По поводу text-rendering: optimizeLegibility: попробовал менять на auto, optimizeSpeed и geometricPrecision, но ничего не изменилось.

Возможно, проблема действительно большом кол-во стилей с переопределением)

[strelok011]

Еще увидел transition: all 0.1s ease-in-out; на ссылках - отключите для пробы. Жаль не могу у себя воспроизвести проблему, но с похожим боролся. Это всё глюки рендера шрифтов при наложении эффектов

[Giorgos]

strelok011, удалил это свойство из ссылок (а также вариации с -webkit, -moz и т. д.). Не помогло, увы)

Я вот только что снова увидел, но не смог записать видео: при наведении на ссылку из популярной записи в сайдбаре между строк произошло небольшое уменьшение на долю секунды и назад всё вернулось. Т. е. не только вбок может сдвинуться ссылка, но и междустрочный интервал сжаться.

У меня на сайте стоит плагин оптимизации Asset Cleanup Pro. Там есть настройки для шрифтов. У меня там стоит font-display: swap, а также скомбинированы обращения к шрифтам, чтобы уменьшить кол-во обращений (в асинхронном режиме, через предзагрузку css стилей). А также стои́т crossorigin rel='preconnect'. Но я не знаю, могут ли эти настройки влиять на мою проблему. Разработчик молчун)

[strelok011]

Giorgos, все же это очень похоже на проблемы с производительностью. В данный момент мне такое даже попробовать негде, вот тут общее исследование похожих проблем
https://danilin.biz/safari-css-transform-flicker.htm
Надо уменьшать нагрузку на ререндер.