必须配contain-intrinsic-size才能生效，否则Chrome将未渲染元素高度算为0px导致页面塌陷、滚动跳变；该值须用px精确设置且宁大勿小，如卡片用120px、流式项用160px。
直接加 content-visibility: auto 不仅不提速，反而会让滚动条猛缩、内容上跳——真正起效必须配 contain-intrinsic-size，且值不能靠猜。
为什么只写 content-visibility: auto 在 Chrome 里更卡
Chrome 85+ 确实支持该属性，但默认把未渲染元素高度算作 0px。1000 个真实高 120px 的卡片，全按 0 算，整个页面高度塌成一条线。用户一滑，滚动条突然回弹、内容往上猛跳、手指拖动位置错乱。
根本原因是它默认启用 size containment，没 contain-intrinsic-size 就等于向浏览器承诺：“这个盒子就是空的”。clientHeight 和 getBoundingClientRect().height 全返回 0，JS 获取尺寸也失效。
-
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（高度仍由内容撑开） - 禁止用
%、em、rem；双值语法中第二个值是height，不能省略
在 Flex/Grid 容器里为什么容易失效
content-visibility: auto 在 Flex/Grid 直接子项上无脑加，大概率导致父容器拉伸异常或子项错位。
- Flex 默认基线对齐，未渲染项高度为
0，会把父容器拉高或压扁 → 建议加align-items: flex-start - Grid 中若只在父级设
contain-intrinsic-size，子项仍可能塌陷 → 必须在grid item上直接设 - 别在
flex或grid的直接子项上无脑加，先确认结构是否“可隔离”
兼容性兜底和 JS 交互避坑
Firefox for Android 和 iOS Safari ≤ 16.4 仍不支持 —— 上线前必须做降级。
- 必须用
@supports (content-visibility: auto)包裹规则，里面写降级方案，比如opacity: 0.99 - 千万别用
element.style.display = 'block'切换显隐 —— 这会清掉渲染缓存，下次显示又要重 layout/paint - 别在滚动监听里动态增删
content-visibility，这等于反复触发重排；它适合静态结构，不是运行时开关
最常被忽略的一点：它不是“开了就快”的开关，而是需要你提前承诺尺寸、明确容器行为、并接受浏览器渲染策略的协作协议。值设错，比不用还糟。
