content-visibility: auto 会导致页面更卡，因浏览器默认将未渲染元素高度视为0px，引发滚动跳变；必须配合 contain-intrinsic-size（如120px）提供准确占位尺寸，否则布局崩溃。
只写 content-visibility: auto 为什么页面反而更卡？
因为浏览器默认把未渲染元素的高度算作 0px。比如 1000 个真实高度为 120px 的卡片，全被当成了 0px，整个页面高度塌成一条线。用户一滑动，滚动条突然回弹、内容往上猛跳、手指拖动位置错乱——这不是优化，是布局灾难。
关键点在于：content-visibility: auto 必须配 contain-intrinsic-size 才有效，否则等于没加。这个值不是“估算”，而是向浏览器做的尺寸占位承诺。
-
contain-intrinsic-size必须用绝对像素（如120px），禁用%、em、rem或0/auto - 单值写法（如
contain-intrinsic-size: 120px）只设高度，宽度仍由内容撑开 - 双值写法（如
contain-intrinsic-size: 300px 240px）第一个是宽度，第二个是高度，第二个值不能省略
contain-intrinsic-size 值怎么设才不翻车？
写错值或留空，等于没设；宁大勿小，但别离谱。它优先级高于子元素的 height 或 min-height，一旦设了，子元素就无法靠自身样式覆盖占位高度。
- 固定高卡片：直接写
contain-intrinsic-size: 120px - 文字流式项（含图片、多行文本）：建议
160px起步，避免内容撑出导致重排 - 网格项需控宽高：用双值，如
contain-intrinsic-size: 300px 240px - 横向长表格（列多行少）：可写
contain-intrinsic-size: 800px 0，让高度仍由内容撑开
在 Flex/Grid 容器里加 content-visibility: auto 为什么容易失效？
Flex 默认基线对齐，未渲染项高度为 0，会导致父容器拉伸异常或子项错位；Grid 中若只在父级设 contain-intrinsic-size，子项仍可能塌陷。
立即学习“前端免费学习笔记（深入）”；
- Flex 容器建议加
align-items: flex-start，避免基线对齐引发错位 - Grid 容器建议直接在 grid item 上设
contain-intrinsic-size，别指望父容器统一撑开 - 别在 flex 或 grid 的直接子项上无脑加——先确认结构是否“可隔离”，比如子项有没有跨行/跨列、有没有依赖兄弟项尺寸
兼容性兜底和 JS 交互必须避开的坑
content-visibility 在 iOS Safari ≤ 16.4、Firefox for Android、所有 IE 版本中完全不支持。强行使用且无降级，页面会退化成全量渲染，性能更差。
- 必须用
@supports (content-visibility: auto)包裹规则，并在里面写降级方案，例如opacity: 0.99或will-change: transform - 千万别用
element.style.display = 'block'切换显隐——这会清掉渲染缓存，下次显示又要重 layout/paint - 内容更新后需强制重绘？临时加 class 更安全：
element.classList.add('force-repaint')，配合 CSS 触发重绘（如transform: translateZ(0)）
contain-intrinsic-size 值偏小或单位写错。 
