content-visibility: auto 必须搭配 contain-intrinsic-size，否则浏览器将未渲染元素高度视为0，导致滚动条突变、内容上跳和布局塌陷；contain-intrinsic-size 提供预占位尺寸，保障滚动稳定与布局准确。
直接加 content-visibility: auto 不行，不配 contain-intrinsic-size 会导致滚动条突然缩短、内容上跳，实际体验更差。
为什么 content-visibility: auto 必须配 contain-intrinsic-size
浏览器对 content-visibility: auto 元素不做布局计算时，会把它当“高度为 0”处理。如果页面有 1000 个列表项，每个真实高 120px，但未渲染时都算 0，整个文档高度就塌成 0 —— 滚动条瞬间缩到顶部，用户手指还在原位置，一松手内容就往上猛跳。
-
contain-intrinsic-size是唯一能告诉浏览器“这玩意儿就算没渲染，也该占这么大地方”的方式 - 值写
120px（固定高）或160px（保守估计，宁大勿小），别写0或留空 - 横向长表格可用
contain-intrinsic-size: 800px 0控制宽度占位，高度仍由内容撑开 - 子元素设了
height或min-height，不会覆盖contain-intrinsic-size，后者优先级更高
哪些元素适合加 content-visibility: auto
不是所有块都能随便加，得看结构是否“可隔离”。以下场景实测有效：
- 单页技术文档的每节：
<section class="doc-section"></section>直接加样式 - 带锚点导航的法规页，每条条款作为独立
<div> 或 <code><p></p> - Markdown 渲染后的段落容器，按
<article></article>或<section></section>级别启用 - 多 tab 面板，每个
<div role="tabpanel"> 单独加，避免切换时重绘整页<li>避免在 <code>flex容器直接给子项加；若必须用，父容器补align-items: flex-start，否则基线对齐可能错位 -
display: none彻底移除布局空间，getBoundingClientRect()返回全 0，屏幕阅读器不可读 -
content-visibility: auto保留占位、可聚焦、支持 CSS 选择器查找、无障碍友好 - JS 动态控制显隐时，别用
element.style.display = 'block'切换；改用临时 class 触发重绘更安全：element.classList.add('force-update')，再setTimeout(() => element.classList.remove('force-update'), 1) - 需要手动触发更新（如富文本加载完成），优先更新
contain-intrinsic-size值，而不是暴力重设content-visibility
content-visibility: auto 和 display: none 别混用
两者语义和行为完全不同，混用会破坏缓存机制，导致重复 layout/paint：
兼容性与降级必须做
Chrome 85+、Edge 85+、Safari 17.4+、Firefox 桌面版已支持；但 Firefox for Android 和 iOS Safari ≤ 16.4 仍不支持 —— 上线前不加 @supports 就是裸奔：
/* 老浏览器自动忽略，无副作用 */
@supports (content-visibility: auto) {
.doc-section,
.list-item {
content-visibility: auto;
contain-intrinsic-size: 160px;
}
}
真正容易被忽略的是：动态内容（比如 JS 插入新段落、折叠展开后高度变化）不会自动更新占位尺寸。一旦 contain-intrinsic-size 估不准，滚动抽搐就会回来 —— 这不是属性失效，是你没管好它的“预估尺子”。
