content-visibility: auto 必须配合 contain-intrinsic-size 使用，否则会导致滚动条异常、布局错位；contain-intrinsic-size 应“宁大勿小”设置，且需兼容浏览器支持与特定场景限制。
content-visibility: auto 单独加等于白加
不配 contain-intrinsic-size 就直接上 content-visibility: auto，浏览器会把未渲染元素按高度 0px 处理——这不是“省资源”，是给滚动条埋雷。结果就是：拖动时滚动条突然变长、内容闪入、页面 footer 上浮、sticky 导航错位。
原因很直接：浏览器跳过了 layout 和 paint，但滚动容器总高度必须有依据。这个依据就是 contain-intrinsic-size，它不是可选项，是强制占位声明。
-
contain-intrinsic-size: auto或留空 → 等同于没写，Chrome/Safari 都无视 -
contain-intrinsic-size: 0→ 比不写更糟，布局彻底塌缩 - 子元素写了
height或min-height→ 不会覆盖contain-intrinsic-size的高度设定（后者优先级更高）
contain-intrinsic-size 怎么设才不翻车
目标不是精确还原真实高度，而是“宁大勿小”地预留安全空间。值错了比不设危害更大——留白过多影响首屏密度，留白过少引发 layout shift。
- 单行固定高列表（如消息气泡、菜单项）：
contain-intrinsic-size: 64px - 卡片类（宽高比稳定，Chrome 122+）：
contain-intrinsic-size: 300px / 200px - 高度差异大（标题行数不定、富文本）：取所有可能高度的最小值 × 1.2，例如最小 120px → 写
144px - 异步加载内容：初始设保守值（如
800px），JS 加载完成后用element.style.containIntrinsicSize = 'auto'或重设具体值
哪些地方加了反而更卡或出错
content-visibility: auto 不是 display 替代品，乱套在错误位置会直接破坏功能。
- 父容器有
overflow: hidden且子元素需溢出展示 →content-visibility强制 layout containment，直接截断溢出 - 含
position: fixed子元素 → fixed 元素脱离视口定位上下文，飘到页面左上角 - 依赖
IntersectionObserver或ResizeObserver→ 未渲染区域不会触发回调，得在auto → visible切换后手动补发 - 服务端直出（SSR）页面 → 首屏 HTML 已含 DOM，但 JS 未执行，用户可能看到大片空白；应 SSR 时设
content-visibility: visible，hydration 后再切为auto - Firefox 和 Safari（含 iOS）至今不支持 → 必须用
@supports (content-visibility: auto)包裹，或 UA 检测降级
content-visibility: hidden 和 display: none 别混用
视觉上都“看不见”，但底层行为天差地别：
-
content-visibility: hidden：DOM 还在，tabindex、focus()、getBoundingClientRect()都可用，只是offsetHeight为0 -
display: none：DOM 彻底排除出渲染树，不占空间，也不响应任何交互或尺寸查询 - 表单控件慎用
content-visibility: hidden：<input>仍保留在 tab 顺序中，但无法聚焦，行为不一致 - 反复切换显隐时：
content-visibility: hidden ↔ auto比display: none ↔ block轻量得多，尤其含大量子节点
最易被忽略的点：它只对“已挂载的 DOM”起效，不减少网络请求，也不替代图片懒加载或数据分页；和 IntersectionObserver 配合时，得自己监听 content-visibility 状态变化再补逻辑——浏览器不会自动帮你兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
