Избавляемся от мерцания при CSS-трансформации в Safari

Не в первый раз замечаю, что при использовании 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;

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