content-visibility: auto là gì?

content-visibility: auto cho browser bỏ qua hoàn toàn việc dựng hình những phần đang ở ngoài màn hình, cho tới khi chúng gần viewport.

.section {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;   /* chiều cao ước lượng khi chưa render */
}

Browser vẫn giữ element trong DOM và trong cây accessibility, chỉ hoãn style, layout và paint — nên khác hẳn display: none hay virtual list.

Hiệu quả rõ nhất với trang dài nhiều khối nặng: bài viết dài, trang tài liệu, danh sách card lớn. Trên trang ngắn thì gần như không đổi.

contain-intrinsic-size là bắt buộc trong thực tế. Không có nó, mọi phần chưa render coi như cao 0 → thanh cuộn nhảy loạn khi người dùng cuộn xuống. auto 600px nghĩa là: dùng 600px làm ước lượng, và nhớ chiều cao thật sau lần render đầu.

Lưu ý 1: đặt lên element ở ngay đầu trang (phần above-the-fold) không giúp gì mà còn thêm chi phí — chỉ áp cho phần chắc chắn nằm ngoài màn hình ban đầu.

Lưu ý 2: content-visibility tạo containment, nên position: sticky bên trong có thể ngừng hoạt động và margin không còn gộp ra ngoài.

Lưu ý 3: Ctrl+F vẫn tìm được nội dung (browser tự render khi cần), nhưng scrollIntoView tới element chưa render có thể nhảy sai vị trí nếu ước lượng chiều cao lệch nhiều.