То, что никто не рассказывает вам про «will-change»
Перевод статьи What nobody tells you about «will-change» с сайта cssmojo.com, автор — Тьерри Кобленц.
Краткая выжимка: не используйте will
-
change
до тех пор, пока все современные браузеры не будут его поддерживать (если только вы не знаете, что делаете).
Что такое will
-
change
?
[will-change] позволяет разработчику заранее сообщить браузеру (Пользовательскому агенту) что за изменения он намерен применить к элементу. Это позволяет браузеру заранее оптимизировать обработку элемента, выполняя подготовку потенциально затратной работы для анимации, прежде чем она фактически начнётся. http://dev.w3.org/csswg/css—will—change/
К сожалению, это свойство делает намного больше, чем «сообщает браузеру»; оно также может изменять контексты наложения или создавать содержащие блоки само по себе.
Зачем об этом думать?
Применение will-change возвращает нас назад прямиком в старые времена IE. В те времена мы верстали страницы, а затем должны были проверять, как они выглядят в IE 6 (или 7, или 8) прежде чем применять необходимые фиксы. С will
-
change
та же картина. Когда вы используете его, то вам нужно проверить в браузерах, которые не понимают will
-
change
, чтобы увидеть, правильно ли всё выглядит или нет.
Простой пример
Этот пример показывает 2 бокса в одних и тех же координатах (x
/y
).
Их разметка:
<div class="box box1"></div> <div class="box box2"></div>
Их оформление:
.box { height:100px; width:100px; } .box1 { background:orange; will-change:transform; } .box2 { background:teal; margin-top:-100px; }
Их отображение:
Браузеры с поддержкой will
-
change
показывают оранжевый бокс вверху, а браузеры без таковой — зелёный бокс.
Это относится к контексту наложения, но я мог бы показать проблемы с участием содержащих блоков, поскольку с ними у will
-
change
тоже есть приколы.
Как бы там ни было
Я думаю, Internet Explorer правильно делает, что тянет резину; поскольку это свойство похоже на большой хак — это напоминает мне DX-фильтры, для которых мы были вынуждены устанавливать элементам hasLayout, который в свою очередь создавал блочные контексты форматирования в IE и только в IE. Люди пользовались фильтрами, не зная об этом побочном эффекте, не зная, сколько раз фильтры становились виновниками разночтений в раскладке между браузерами.
В общем, всё сводится к издержкам хаков со слоями против предотвращения браузерных несоответствий. Выбирайте из двух зол.
P.S. Это тоже может быть интересно:
Должен немножко уточнить/дополнить Тьерри: всё-таки контексты наложения и содержащие блоки для фиксированных элементов меняет не «
will-change
само по себе». Меняют лишь значения, соответствующие свойствам, которые сделали бы это сами — например,transform
(пример, где это можно увидеть наглядно). Поэтому необходимость проверять страницу в новых (понимающихtransform
) и старых браузерах осталась бы и безwill-change
, но сwill-change
хотя бы контексты наложения не будут внезапно меняться в одном и том же браузере при динамическом включении/выключении трансформации или прозрачности (например, по:hover
).Но в чем я с Тьерри согласен полностью и давно — в том, что «волшебные» свойства, неявным образом включающие «особый, более быстрый и менее глючный» алгоритм рендеринга для отдельных элементов, действительно до боли напоминает старинные мучения с
hasLayout
для IE7-:)Да, действительно, когда в первый раз узнал об этом свойстве — вспомнил про
hasLayout
. Очень надеялся, что такого эффекта не будет. Очень жаль. :-(