content-visibility: auto 单独使用会更卡，因浏览器默认按高度0计算未渲染元素，导致滚动容器塌陷、滚动条突变、内容上跳；必须配contain-intrinsic-size（如卡片120px、流式项160px），且需@supports兜底、Flex/Grid中单独设于子项并避免基线对齐问题。
content-visibility: auto 单独使用不仅不提速，反而会让滚动条猛缩、内容上跳——真正起效必须配 contain-intrinsic-size，且值不能靠猜。
为什么只加 content-visibility: auto 会更卡
浏览器对设了该属性的元素，默认跳过 layout 和 paint，clientHeight 和 getBoundingClientRect().height 全返回 0。1000 个真实高 120px 的卡片，未渲染时全算成 0，整个滚动容器高度塌成一条线。用户一滑，滚动条突然回弹、内容往上猛跳、手指拖动位置错乱。
根本原因是它默认启用 size containment，没 contain-intrinsic-size 就等于向浏览器承诺“这个盒子就是空的”。display: none 是移除占位，content-visibility: auto 是保留占位但暂缓渲染——语义和行为完全不同。
-
height或min-height在子元素上无效，contain-intrinsic-size优先级更高 - 值写成
0、留空或用%/em，效果等同于没设 - 移动端尤其忌讳照搬 PC 端写法，或依赖 JS 动态注入——首屏就抖
contain-intrinsic-size 怎么设才不翻车
这不是估算，是向浏览器做的尺寸占位承诺。写错值，轻则撑破占位触发重排，重则布局塌陷。
- 卡片类（固定高）：
contain-intrinsic-size: 120px - 文字流式项（多行、高度浮动）：
contain-intrinsic-size: 160px（宁大勿小） - 网格项需控宽高：
contain-intrinsic-size: 300px 240px - 横向长表格只控宽：
contain-intrinsic-size: 800px 0（高度仍由内容撑开）
注意：双值语法中第二个值是 height，不能省略；auto 值部分浏览器支持有限，生产环境慎用。
立即学习“前端免费学习笔记（深入）”；
在 Flex/Grid 容器里为什么容易失效
content-visibility: auto 在 Flex/Grid 直接子项上无脑加，大概率导致父容器拉伸异常或子项错位。
- Flex 容器默认基线对齐，未渲染项高度为 0，会把父容器拉高或压扁
- Grid 容器中若只在父级设
contain-intrinsic-size，子项仍可能塌陷 - 正确做法：在 grid item 上直接设
contain-intrinsic-size，别指望父容器统一撑开 - 若必须用 Flex，建议加
align-items: flex-start避免基线对齐错位
兼容性和 JS 交互避坑要点
Firefox for Android、iOS Safari ≤ 16.4、所有 IE 版本都不支持 content-visibility。强行使用且无降级，页面会退化成全量渲染甚至布局错乱。
- 必须用
@supports (content-visibility: auto)包裹规则，里面写降级方案（如opacity: 0.99） - JS 动态控制显隐时，千万别用
element.style.display = 'block'切换——这会让浏览器丢弃已缓存的渲染状态 - 正确做法：用 class 控制，例如临时加
force-update触发重绘：element.classList.add('force-update')，再setTimeout(() => element.classList.remove('force-update'), 1) -
content-visibility: hidden会让读屏器不可读、tabindex失效，生产环境慎用
最常被忽略的是：它不减少网络请求，也不替代图片懒加载或数据分页——只是让浏览器少做 layout/paint，而占位尺寸一旦失真，抖动比不加还明显。
