То, что никто не рассказывает вам про «will-change»

Перевод статьи What nobody tells you about «will-change» с сайта cssmojo.com, автор — Тьерри Коблинз.

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

Что такое will-change?

[will-change] позволяет разработчику заранее сообщить браузеру (Пользовательскому агенту) что за изменения он намерен применить к элементу. Это позволяет браузеру заранее оптимизировать обработку элемента, выполняя подготовку потенциально затратной работы для анимации, прежде чем она фактически начнётся. http://dev.w3.org/csswg/csswillchange/

К сожалению, это свойство делает намного больше, чем «сообщает браузеру»; оно также может изменять контексты наложения или создавать содержащие блоки само по себе.

Зачем об этом думать?

Применение 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. Это тоже может быть интересно:

2 Комментарии

  1. SelenIT

    Должен немножко уточнить/дополнить Тьерри: всё-таки контексты наложения и содержащие блоки для фиксированных элементов меняет не «will-change само по себе». Меняют лишь значения, соответствующие свойствам, которые сделали бы это сами — например, transform (пример, где это можно увидеть наглядно). Поэтому необходимость проверять страницу в новых (понимающих transform) и старых браузерах осталась бы и без will-change, но с will-change хотя бы контексты наложения не будут внезапно меняться в одном и том же браузере при динамическом включении/выключении трансформации или прозрачности (например, по :hover).

    Но в чем я с Тьерри согласен полностью и давно — в том, что «волшебные» свойства, неявным образом включающие «особый, более быстрый и менее глючный» алгоритм рендеринга для отдельных элементов, действительно до боли напоминает старинные мучения с hasLayout для IE7-:)

  2. afdw

    Да, действительно, когда в первый раз узнал об этом свойстве — вспомнил про hasLayout. Очень надеялся, что такого эффекта не будет. Очень жаль. :-(

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.