content-visibility: auto 必须配合合理设置的 contain-intrinsic-size 才生效，否则会导致滚动条回弹、内容上跳；需避免在 Flex/Grid 中误用，且须用 @supports 做兼容性兜底。
直接加 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 怎么设才不翻车
这不是估算，是向浏览器做的尺寸占位承诺。写错值或留空，效果等同于没设。
- 卡片类（固定高）：
contain-intrinsic-size: 120px - 文字流式项（多行、高度浮动）：
contain-intrinsic-size: 160px（宁大勿小，小了会撑破占位触发重排） - 网格项需控宽高：
contain-intrinsic-size: 300px 240px - 横向长表格只控宽：
contain-intrinsic-size: 800px 0（高度仍由内容撑开） - 禁止用
%、em、rem等相对单位；移动端尤其忌讳照搬 PC 端写法或依赖 JS 动态注入
content-visibility: auto 在 Flex/Grid 容器里容易失效
Flex 容器默认用基线对齐，content-visibility: auto 的项初始高度为 0，会导致父容器拉伸异常或子项错位；Grid 容器中若只在父级设 contain-intrinsic-size，子项仍可能塌陷。
立即学习“前端免费学习笔记（深入）”；
- Flex 容器中必须加
align-items: flex-start避免基线对齐错位 - Grid 容器建议直接在 grid item 上设
contain-intrinsic-size，别指望父容器统一撑开 - 别在 flex 或 grid 的直接子项上无脑加，先确认结构是否“可隔离”
兼容性兜底和 JS 交互避坑
Firefox for Android、iOS Safari ≤ 16.4、所有 IE 版本都不支持 content-visibility。强行使用且无降级，页面在这些环境里会退化成全量渲染，甚至布局错乱。
- 必须用
@supports (content-visibility: auto)包裹规则，里面写降级方案，比如opacity: 0.99（保留占位+无障碍） - JS 动态控制显隐时，千万别用
element.style.display = 'block'切换——这会清掉渲染缓存，下次显示又要重 layout/paint - 内容更新后需强制重绘？临时加 class 再移除更安全：
element.classList.add('force-update')，再setTimeout(() => element.classList.remove('force-update'), 1)
真正难的不是加两行 CSS，而是估算好 contain-intrinsic-size 的值、处理好 Flex/Grid 的对齐副作用、以及在不支持的浏览器里不破坏原有布局。这三个点漏掉任何一个，性能优化都会变成负优化。
