В production-проектах, таких как лендинги, каталоги e-commerce или медиа-сайты с бесконечным скроллом, одна из самых частых ошибок — использование JavaScript для ленивой загрузки контента. Intersection Observer часто приводит к гонкам таймингов: scrollbar меняет длину при подгрузке, что вызывает раздражение пользователя и визуальную регрессию. CSS-свойство
content-visibility: auto решает это на уровне браузера, гарантируя стабильный scrollbar без костылей.Как добиться детерминизма
Браузер с
content-visibility: auto резервирует точное место для элемента до его рендеринга. Для этого нужна известная высота — задайте её через contain-intrinsic-size: auto 300px. Это не fallback для старых версий, а обязательное условие: без него блок схлопнется в 0px, и scrollbar «прыгнет» после подгрузки контента. В production для каталога товаров:.product-card {
content-visibility: auto;
contain-intrinsic-size: auto 350px;
}Браузер синхронизирует рендеринг при скролле на расстоянии ~1500px от viewport, игнорируя layout и paint для скрытых блоков. Это даёт до 30% ускорения первого отклика без потери стабильности.
Типичная ошибка и её решение
Многие разработчики путают
content-visibility: auto с hidden. hidden не резервирует место — используйте его только для временного скрытия блоков, например, в аккордеонах. auto же идеален для шаблонных секций: список товаров, блоки с повторяющимися карточками, секции «рекомендации».Предупреждение: не применяйте
auto для первых 1-2 экранов — это добавляет оверхед, так как браузер всё равно их отрисовывает сразу. Для них используйте content-visibility: visible (по умолчанию).Практический совет для адаптивности
На мобильных, где скролл может быть плавным, scrollbar не должен «дёргаться». Убедитесь, что высота контейнера задана через
contain-intrinsic-size с единицами, не зависящими от viewport (например, px). Избегайте auto в комбинации с min-height: 100vh — это приведёт к скачкам, так как браузер не может предсказать окончательную высоту до рендеринга.Вывод:
content-visibility: auto — это не микро-оптимизация, а стандартный инструмент для детерминированного рендеринга, который решает проблему scrollbar-джампинга без JS-костылей, если правильно настроить размеры.