Как сделать плавную смену фоновых изображений в Сафари

Недавно обнаружил, что в Сафари при плавной смене по ховеру одного фонового изображения на другое проявляются неприятные артефакты в виде каких-то трансформаций и движений.

Проще говоря, при смене фоновых изображений они скачут и меняются в размерах. Причём в Хроме, на других вебкитах происходит все очень даже плавно и гладко. Разные игры с background-position и background-size результатов не принесли. Проблема решается только отключением transition, но по условиям задачи смена изображений должна происходить плавно.

Данную задачу можно легко решить с помощью псевдоклассов, просто установив первое изображение в :before, второе в :after, абсолютно спозиционировать и по ховеру просто менять их прозрачность.

Если тоже используете смену фона, проверьте, как она выглядит в Сафари.
Успехов!

Больше полезных материалов по веб-разработке на моем канале в Телеграм.
Обязательно подпишитесь.

Иван Данилин
Автор Иван Данилин

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

Добавить комментарий