content-visibility: auto 必须配合合理设置的 contain-intrinsic-size 才生效，否则会导致滚动条回弹、内容上跳；需显式设置容器高度和 overflow-y: auto，且注意浏览器兼容性与布局容器限制。
直接加 content-visibility: auto 不仅不快，反而会让滚动条猛缩、内容上跳——真正起效的前提是配对设置 contain-intrinsic-size，且值必须合理。
为什么 content-visibility: auto 单独用会更卡
浏览器对设了该属性的元素，默认跳过 layout 和 paint，clientHeight 和 getBoundingClientRect().height 全返回 0。1000 个真实高 120px 的卡片，未渲染时全算成 0，整个滚动容器高度塌成一条线。用户一滑，滚动条突然回弹、内容往上猛跳、手指拖动位置错乱。
根本原因是它默认启用 size containment，没 contain-intrinsic-size 就等于承诺“这个盒子就是空的”。display: none 是移除占位，content-visibility: auto 是保留占位但暂缓渲染——语义和行为完全不同。
- 子元素的
height或min-height不会覆盖它，优先级更低 - 在 Grid 容器中，若只在父级设
contain-intrinsic-size，子项仍可能塌陷 - 必须在每个
grid-item上显式设置，不能依赖继承或父容器统一撑开
contain-intrinsic-size 怎么设才不翻车
这不是估算，是向浏览器做的尺寸占位承诺。写错值或留空，效果等同于没设。
- 卡片类（固定高）：
contain-intrinsic-size: 120px - 文字流式项（多行、高度浮动）：
contain-intrinsic-size: 160px（宁大勿小，小了会撑破占位触发重排） - 网格项需控宽高：
contain-intrinsic-size: 300px 240px - 横向长表格只控宽：
contain-intrinsic-size: 800px 0（高度仍由内容撑开） - 禁止用
%、em、rem等相对单位；移动端尤其忌讳照搬 PC 端写法
Grid 容器里加 content-visibility 的坑
Flex 容器默认用基线对齐，content-visibility: auto 的项初始高度为 0，会导致父容器拉伸异常或子项错位；Grid 容器中若只在父级设 contain-intrinsic-size，子项仍可能塌陷。
- Grid 容器建议直接在
grid-item上设，别指望父容器统一撑开 - 别在
flex或grid的直接子项上无脑加，先确认结构是否“可隔离” - 如果列表项本身是嵌套 Grid（比如每项内还有子网格），
content-visibility可能失效或错位 - 旧版 Safari（iOS ≤ 16.4）、Firefox for Android 不支持，必须用
@supports (content-visibility: auto)包裹规则做降级
滚动容器必须显式设高 + overflow-y: auto
这是所有优化（包括 content-visibility 和虚拟列表）生效的前提。不满足这个条件，scrollTop 会跳变或归零，后续所有索引计算全失效。
- 错误写法：
height: auto、min-height: 600px、父级display: flex且未设flex: 1 - 正确写法：
height: 600px; overflow-y: auto;，且该元素不能被任何overflow: hidden父级裁剪 - Vue 中若用
v-virtual-scroll，确认插件文档是否要求 wrapper 元素显式设高 - React 中用
ref绑定，必须指向这个带overflow的容器，不是外层 wrapper
真正难的不是让 content-visibility 跑起来，而是判断什么时候该砍掉 grid-template-columns 声明、改用固定列数 + 虚拟滚动——尤其是当列表项超 500 条且含图片或富文本时，光靠 CSS 已经不够用了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
