Браузер по умолчанию считает layout и paint для всей страницы, даже если 80% контента за фолдом.
content-visibility: auto говорит: пока элемент не «релевантен пользователю», пропускай style/layout/paint его поддерева. DOM, a11y-дерево и поиск по странице при этом работают - в отличие от content-visibility: hidden.Но есть цена: у пропущенного элемента нет внутреннего размера, и его block-size схлопывается. Скроллбар прыгает,
scrollHeight врёт, anchor-ссылки и scroll-restore уезжают.Лечится
contain-intrinsic-size - placeholder-размер, который подставляется вместо настоящего, пока секция не отрендерена:.feed > article {
content-visibility: auto;
/* 420px - оценка; после первого рендера запомнится реальная высота */
contain-intrinsic-size: auto 420px;
}Ключевое слово здесь -
auto. Без него placeholder всегда будет тем, что вы написали. С ним браузер запоминает последний отрендеренный размер и дальше использует его как placeholder - при повторном выезде элемента скролл уже не дёргается. Поэтому оценку берите близкой к реальности: от неё зависит длина скроллбара и позиция скролла до первого рендера.Нужны две оси - используйте две величины (
width height) или логические contain-intrinsic-block-size / contain-intrinsic-inline-size.Где ломается
1.
content-visibility: auto неявно включает contain: layout style paint. Элемент становится containing block для absolute/fixed потомков, а overflow обрезается. position: fixed внутри секции перестаёт цепляться к вьюпорту, sticky ведёт себя иначе, выносы отрицательными margin обрезаются.