Не в первый раз замечаю, что при использовании CSS-трансформаций, некоторые элементы на странице в Safari таинственным образом меняют свои свойства. В других браузерах подобное наблюдается значительно реже.
Особенно заметны такие артефакты когда трансформация стоит на псевдоклассе :hover, т.е срабатывают при наведении мыши на элемент. В моём случае увеличение кнопки .btn при наведении на неё мыши, перманентно вызывало изменение типа сглаживания текста в соседних блоках.
.btn { transition: all .2s ease-in-out; } .btn:hover { transform: scale(1.1); }
Проблема связана с нехваткой ресурсов для рендеринга, и довольно легко лечится.
Translate3D
Самый простой способ решения задачи — это активизация аппаратного ускорения, которое для двухмерной анимации в CSS по умолчанию отключено. Для этого просто создаём пустую 3D-анимацию.
-webkit-transform: translate3d(0,0,0);
Всё, но это костыль.
Will-Change
В CSS существует относительно новое и пока малоизвестное свойство will-change, которое заранее передаёт браузеру информацию о возможном предстоящем изменении того или иного элемента. Например, если элемент планируется трансформировать, об этом можно предупредить браузер, чтобы он приберёг силы, как говорится. В случае с вышеупомянутой кнопкой, выглядит это так:
.btn { transition: all .2s ease-in-out; will-change: transform; }
Если планируется изменение нескольких параметров, их можно задать последовательно через запятую. Например, для трансформации с изменением прозрачности:
will-change: transform, opacity;
Таким образом, браузер сможет заранее подготовиться к тяжёлой обработке и оптимизировать использование ресурсов. Что позволит избежать появления на странице различных побочных эффектов.
Делаю сайты на Вордпресс с 2008 года, в том числе уникальные инструменты для решения сложных бизнес‑задач.
Подробнее-
это не работает в связке со scale, упомяните о Scale3d
-
Супер, очень помогло!