content-visibility: auto需配合contain-intrinsic-size使用，否则因高度塌陷导致滚动跳动；其值应接近单个项真实高度，宁大勿小；不支持浏览器需降级处理。
content-visibility: auto 能显著提升长列表 FPS，但不配 contain-intrinsic-size 会导致滚动跳动、高度塌陷，实际体验更差——这不是“开了就快”，而是“开错就卡”。
为什么content-visibility: auto在长列表里容易失效
它只跳过离屏项的 layout 和 paint，但不会自动猜高度。浏览器看到未渲染元素的高度是 0px，于是把整个滚动容器撑成一条线，等元素滚入才突然撑开——结果就是滚动条猛缩、内容上跳、手指跟丢。
- 必须显式设置
contain-intrinsic-size，且值要接近单个项真实高度（如卡片固定高120px，就写120px） - 高度不固定时（如含多行文字），取保守估计值（如
160px），宁大勿小 - 严禁写成
contain-intrinsic-size: 0或留空，这等于没设 -
contain-intrinsic-size优先级高于子元素的height或min-height，别指望靠它们兜底
content-visibility 和 display: none 别混用
两者行为完全不同：display: none 移除布局空间、屏幕阅读器不可读、getBoundingClientRect() 返回全 0；而 content-visibility: auto 保留占位、可聚焦、无障碍友好，且滚动进入后自动恢复渲染。
- JS 动态控制显隐时（如下拉加载后 show/hide），别用
display切换——这会破坏缓存机制，导致重复 layout/paint - 需要手动触发重绘时（如内容更新后），临时加 class 再移除更安全：
element.classList.add('force-update'); setTimeout(() => element.classList.remove('force-update'), 1)
Flex/Grid 容器中设 content-visibility 的坑
不是所有父容器都“听话”。Flex 容器中，子项设 content-visibility: auto 时，父容器需加 align-items: flex-start，否则可能因基线对齐出错；Grid 容器中，建议对 grid item 单独设 contain-intrinsic-size，不要指望父容器统一撑开。
- Flex 父容器漏掉
align-items: flex-start→ 子项垂直对齐异常，高度计算错乱 - Grid 父容器设了
contain-intrinsic-size→ 对子项无效，必须每个 item 自己设 - iOS Safari ≤ 16.4 和 Firefox Android 不支持该特性，必须用
@supports (content-visibility: auto)包裹并提供降级（如opacity: 0.99）
真正难的不是加那两行 CSS，而是估算高度的精度和降级时的 DOM 行为一致性——尤其当列表项内有图片、字体加载、行数不确定时，contain-intrinsic-size 偏差 20px 就可能让滚动条抖三次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
