必须配contain-intrinsic-size，否则content-visibility:auto会导致滚动抖动和布局塌陷；它承诺未渲染元素的占位尺寸，需用绝对数值宁大勿小，如固定高120px写120px，流式项保守取160px或240px。
不配 contain-intrinsic-size 的 content-visibility: auto 不是优化，是制造滚动抖动和布局塌陷。 它会让浏览器把未渲染元素当“高度为 0”处理，导致整个文档高度突变，用户一滑就上跳、滚动条缩回、手指定位错乱。
为什么必须写 contain-intrinsic-size？
浏览器对设了 content-visibility: auto 的元素，默认跳过 layout 和 paint，但不会自动猜它该占多高。没 contain-intrinsic-size，DOM 节点还在，尺寸信息却没了——clientHeight、getBoundingClientRect().height 全返回 0，父容器高度直接塌掉。
这不是“估算”，是“承诺”：你告诉浏览器“这个区域哪怕没渲染，也得预留这么多空间”。不写、写 0、写 auto，效果都等同于没设。
contain-intrinsic-size 值怎么取才不翻车
核心原则：宁大勿小，不依赖子元素样式，只用绝对数值。
- 固定高度卡片（如每项 120px）→ 直接写
contain-intrinsic-size: 120px - 文字流式项（标题行数不定、含图片）→ 取最大可能高度保守值，比如
contain-intrinsic-size: 160px或240px - 网格项需控宽高 → 用双值语法：
contain-intrinsic-size: 300px 240px（Chrome 122+ 支持斜杠写法300px / 200px） - 子元素写了
height: 100px或min-height: 80px？会被忽略——contain-intrinsic-size优先级更高 - 千万别写
contain-intrinsic-size: 0或留空；相对单位如em、rem、百分比全无效
哪些地方容易踩坑
常见错误不是不会写，而是忽略了上下文约束：
-
content-visibility: auto对display: inline或float元素无效，只作用于块级或弹性/网格子项 - 父容器用了
height: 100vh+overflow: auto？确保父容器本身没被压缩，否则占位再准也没用 - 和
display: none混用会清空渲染缓存——JS 动态 show/hide 时，改用visibility: hidden或 CSS 类切换，别碰display - Firefox Android 和 iOS Safari ≤ 16.4 不支持，必须用
@supports (content-visibility: auto)包裹，并提供降级（如opacity: 0.99） - 大量元素同时启用时，即使配了
contain-intrinsic-size，仍可能出现微小滚动条跳变——这是浏览器内部重排节奏问题，可考虑分片加载或加scroll-margin-top缓冲
真正难的不是加两行 CSS，而是把“占位高度”估得既稳又不过度浪费空间。尤其在动态内容场景下，那个看似随意的 160px，其实是权衡可访问性、滚动稳定性和内存开销后的结果——写小了会重排，写大了留白多，没标准答案，只有实测反馈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
