必须配contain-intrinsic-size，否则content-visibility: auto会使未渲染元素高度被当作0，导致滚动条跳变、内容上蹿、布局塌陷；该属性用于预设占位尺寸以保障布局稳定。
直接加 content-visibility: auto 不仅没提速，反而会让滚动条跳、内容上蹿、布局塌陷——必须配 contain-intrinsic-size 才能安全启用。
为什么 content-visibility: auto 单独用会出问题
浏览器对未渲染的 content-visibility: auto 元素，会把它当“高度为 0”处理。比如一个长列表有 500 个 .item，每个真实高度是 120px，但初始都没渲染，整个容器高度就塌成 0 —— 滚动条瞬间缩回顶部，用户一松手，内容猛地往上跳。
- 这不是偶发抖动，而是 layout 计算缺失导致的确定性行为
-
visibility: hidden或display: none不会这样，因为它们不保留占位逻辑 - 无障碍工具、
getBoundingClientRect()、CSS 选择器仍能访问这些元素，但尺寸信息全丢
contain-intrinsic-size 怎么写才有效
它不是可选项，是 content-visibility: auto 的强制搭档，用来“预占位”。值写小了照样塌，写大了只多占点空间，比塌掉强。
- 固定高度列表：
contain-intrinsic-size: 120px（宁大勿小，比如写130px更稳） - 高度不均但有底线：
contain-intrinsic-size: 80px（取最小项高度，再加一点余量） - 横向长表格（如报表）：
contain-intrinsic-size: 800px 0（宽度预占，高度由内容撑） - 别写
0、别留空、别用auto（auto 100px中的auto是无效的）
哪些结构适合加 content-visibility: auto
不是所有块都适合，关键看是否“可隔离”：子内容变化不影响外部布局流。
- 技术文档每节：
<section class="doc-section"></section>级别加，锚点跳转不受影响 - 法规/条款页的每条：
<p class="clause"></p>或<div class="article"> <li>Tab 面板的每个面板：<code><div role="tabpanel"> 单独加，切换时不重绘整页 <li>避免在 <code>display: flex容器直接给子项加；若必须，父容器补align-items: flex-start，否则基线对齐错位 - JS 控制显隐时，别直接改
element.style.display - 改用临时 class 触发更新更安全：
element.classList.add('force-update')，再setTimeout(() => element.classList.remove('force-update'), 1) - 富文本加载完成需手动刷新？优先更新
contain-intrinsic-size值，而不是重设content-visibility
和 display: none 混用会破坏缓存
两者语义完全不同：display: none 彻底移除布局空间，content-visibility: auto 保留占位、支持聚焦、无障碍友好。混用会让浏览器反复丢弃/重建渲染状态。
最易被忽略的点：兼容性必须降级。Chrome 85+、Edge 85+、Safari 17+ 支持，Firefox 和旧版 Safari 不支持。用 @supports (content-visibility: auto) 包裹样式，否则老浏览器会忽略整条规则，但不会报错——你得自己验证 fallback 是否生效。
