Что делает свойство will-change в CSS

Что проверяют

Понимаете ли вы, что will-change это подсказка браузеру, а не ускоритель, и знаете ли её побочные эффекты. Вопрос быстро разделяет тех, кто читал про композитные слои, и тех, кто копирует свойство из ответов на форуме.

Как отвечать

will-change заранее сообщает движку, какое свойство у элемента вот-вот начнёт меняться, чтобы подготовка (обычно вынос содержимого на отдельный композитный слой) случилась до анимации, а не на первом её кадре.

Что важно проговорить:

• польза есть для свойств, которые анимируются композитором: transform, opacity, filter. Для width, top, margin слой не спасает, эти свойства всё равно вызывают пересчёт раскладки каждый кадр;
• слой стоит памяти, поэтому подсказку ставят точечно и на время: включают на состоянии родителя, например в правиле .card:hover .inner, или из скрипта перед стартом, и снимают после transitionend;
• постоянный will-change в базовом правиле почти бессмыслен: браузер не держит оптимизацию бесконечно, а ресурсы тратятся;
• will-change: all вредная запись, она просит подготовиться ко всему сразу.

Хорошо добавить, что для уже идущей анимации transform или opacity браузер обычно создаёт слой и сам, поэтому свойство помогает главным образом там, где первый кадр должен быть мгновенным.

Где спотыкаются

Не знают, что для transform, opacity и filter это свойство создаёт контекст наложения и делает элемент содержащим блоком для потомков. Вложенный position: fixed внезапно позиционируется относительно карточки, а слои начинают перекрываться не так, как задумано.

Второе: вешают подсказку на все анимируемые элементы списка. Сотни слоёв съедают память, и на слабом телефоне страница начинает дёргаться сильнее, чем без подсказки.

Третье: ждут, что свойство ускорит анимацию left или width. Ускоряет не оно, а переход на transform, подсказка лишь помогает подготовиться.