Изоляция компоновки

Браузер по умолчанию исходит из худшего: изменение текста в одной карточке теоретически может сдвинуть всю страницу, поэтому после правок в DOM он нередко пересчитывает раскладку большого участка документа. Свойство contain снимает эту неопределённость. Разработчик сообщает, что элемент — замкнутая коробка, и браузер ограничивает перерасчёт компоновки и перерисовку её пределами.

Виды изоляции

• layout — раскладка внутри не влияет на внешнюю и наоборот. Элемент становится содержащим блоком для абсолютно и фиксированно позиционированных потомков.
• paint — потомки не рисуются за границами элемента, как при overflow: hidden, а если элемент вне экрана, его содержимое можно не рисовать вовсе.
• size — размер не зависит от содержимого. Без явных размеров такой блок схлопнется, поэтому значение используют осторожно. Вариант inline-size изолирует только ширину.
• style — счётчики и кавычки внутри не влияют на внешние.

Сокращение contain: content означает layout paint style — самый безопасный набор для виджетов; contain: strict добавляет ещё и size.

Пример: длинная лента

.feed-item {
  contain: content;
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

Свойство content-visibility: auto развивает ту же идею: браузер пропускает отрисовку элементов за пределами экрана и занимается ими, только когда они приближаются при прокрутке. Чтобы полоса прокрутки не скакала, contain-intrinsic-size задаёт ожидаемую высоту, а слово auto разрешает браузеру запомнить реальный размер после первой отрисовки. На длинных каталогах, лентах комментариев и больших статьях это может заметно сократить работу браузера при загрузке.

Неожиданные эффекты

Изоляция включается и неявно. Объявление container-type: inline-size для контейнерного запроса изолирует ширину и раскладку элемента, поэтому такой контейнер не может подстраивать ширину под содержимое. А у layout и paint ловушка та же, что у transform: внутри такого блока position: fixed отсчитывается от него, а не от окна, и всплывающее окно внутри карточки внезапно уезжает вместе с ней при прокрутке.