content-visibility: auto 必须配合合理设置 contain-intrinsic-size 才能生效，否则会导致滚动条回弹、内容上跳；该值需用 px 单位、宁大勿小，并避开 flex/grid 直接子项滥用，且需 @supports 降级兼容。
只加 content-visibility: auto 不但不提速，反而会让滚动条猛缩、内容上跳——真正起效的前提是配对设置 contain-intrinsic-size，且值必须合理。
为什么 content-visibility: auto 必须配 contain-intrinsic-size
浏览器看到 content-visibility: auto 的元素，默认按高度 0px 计算整个滚动容器高度。1000 个真实高 120px 的卡片，全算成 0，页面就塌成一条线。用户一滑，滚动条突然回弹、内容往上跳、手指拖动错位——这不是优化，是交互断裂。
- 根本原因是该属性默认启用 size containment，没
contain-intrinsic-size就等于向浏览器承诺“这个盒子就是空的” -
contain-intrinsic-size是占位尺寸承诺，不是估算；写错、写0或留空，效果等同于没设 - 子元素的
height或min-height不会覆盖它，优先级更低
contain-intrinsic-size 值怎么设才不翻车
必须用绝对单位 px，禁用 %、em、rem；移动端尤其不能照搬 PC 写法。
- 卡片类（固定高）：
contain-intrinsic-size: 120px - 文字流式项（多行、图片浮动）：
contain-intrinsic-size: 160px（宁大勿小，小了会撑破占位触发重排） - 网格项需控宽高：
contain-intrinsic-size: 300px 240px - 横向长表格只控宽：
contain-intrinsic-size: 800px 0（高度仍由内容撑开）
在 Flex/Grid 容器里加 content-visibility: auto 容易失效
Flex 默认基线对齐，未渲染项高度为 0，会导致父容器拉伸异常或子项错位；Grid 中若只在父级设 contain-intrinsic-size，子项仍可能塌陷。
- Grid 容器建议直接在 grid item 上设
contain-intrinsic-size，别指望父容器统一撑开 - 别在 flex 或 grid 的直接子项上无脑加，先确认结构是否“可隔离”
- 避免嵌套使用，尤其不要在已设
content-visibility的容器内部再设
兼容性兜底和 JS 交互避坑
Chrome 85+、Edge 85+、Safari 17.4+ 支持；Firefox 桌面版已支持，但 Firefox for Android 和 iOS Safari ≤ 16.4 仍不支持——上线前必须降级。
- 必须用
@supports (content-visibility: auto)包裹规则，里面写降级方案，比如opacity: 0.99（保留占位+无障碍） - JS 动态控制显隐时，千万别用
element.style.display = 'block'切换——这会让浏览器丢弃已缓存的渲染状态 - 正确做法：用 class 控制，例如临时加
force-update触发重绘，或富文本加载完成后优先更新contain-intrinsic-size值
最常被忽略的点：contain-intrinsic-size 值一旦设错，整个机制就失效；而它的值又没法靠 JS 动态注入来补救——首屏渲染阶段就已决定滚动行为是否稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
