content-visibility: auto 必须搭配 contain-intrinsic-size 才能生效，否则浏览器将未渲染元素高度视为0，导致滚动条突变、内容上跳和布局塌陷；该属性提供占位尺寸承诺，取值须为具体像素且宁大勿小。
直接加 content-visibility: auto 不仅不能提速，反而会让滚动条猛缩、内容上跳——真正起效的前提是配对设置 contain-intrinsic-size，且值必须合理。
为什么只写 content-visibility: auto 会更卡
浏览器看到未渲染的元素时，clientHeight 和 getBoundingClientRect().height 都返回 0。1000 个列表项，每个真实高 120px，但全按 0 算，整个滚动容器高度就塌成一条线。用户一滑，滚动条突然回弹、内容往上猛跳、手指位置错乱——这不是优化，是布局抖动。
根本原因：该属性默认启用 size containment，没 contain-intrinsic-size 就等于承诺“这个盒子就是空的”。
-
contain-intrinsic-size不是“估算”，是向浏览器做的尺寸占位承诺 - 不写、写成
0或留空，效果等同于没设 - 子元素的
height或min-height会被忽略，它优先级更高
contain-intrinsic-size 怎么设才不翻车
值必须是具体像素（px），不支持 %、em、rem 等相对单位；移动端尤其忌讳照搬 PC 端写法或依赖 JS 动态注入——首屏就抖。
- 卡片类（固定高）：
contain-intrinsic-size: 120px - 文字流式项（多行、高度浮动）：
contain-intrinsic-size: 160px（宁大勿小，小了会撑破占位触发重排） - 网格项需控宽高：
contain-intrinsic-size: 300px 240px - 横向长表格只控宽：
contain-intrinsic-size: 800px 0（高度仍由内容撑开）
和 display: none 混用会破坏缓存机制
两者行为完全不同：display: none 移除布局空间、getBoundingClientRect() 返回全 0、屏幕阅读器不可读；而 content-visibility: auto 保留占位、可聚焦、无障碍友好，且滚动进入后自动恢复渲染。
JS 动态控制显隐（如下拉加载后 show/hide）时，千万别用 element.style.display = 'block' 切换——这会让浏览器丢弃已缓存的渲染状态，下次进视口得重新 layout + paint。
- 正确做法：用 class 控制，例如临时加
force-update触发重绘：element.classList.add('force-update')，再setTimeout(() => element.classList.remove('force-update'), 1) - 富文本加载完成等场景，优先更新
contain-intrinsic-size值，而不是暴力重设content-visibility
Flex/Grid 容器中设 content-visibility 的坑
不是所有父容器都“听话”。Flex 容器里，子项设 content-visibility: auto 时，若父容器没加 align-items: flex-start，可能因基线对齐出错，导致高度计算错乱；Grid 容器中，contain-intrinsic-size 必须设在每个 grid item 上，父容器统一设无效。
- Flex 父容器漏掉
align-items: flex-start→ 子项垂直对齐异常 - Grid 父容器设了
contain-intrinsic-size→ 对子项完全不起作用 - iOS Safari ≤ 16.4 和 Firefox Android 不支持该特性，必须用
@supports (content-visibility: auto)包裹并提供降级（如opacity: 0.99）
最难的从来不是加那两行 CSS，而是当列表项里有图片加载、字体回流、行数不确定时，contain-intrinsic-size 偏差 20px 就可能让占位失真——这时候靠预估不如靠 JS 动态修正，但得确保首屏不抖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
