content-visibility: auto 必须配合合理设置 contain-intrinsic-size 才有效，否则会导致滚动条回弹、内容上跳；其默认启用 size containment，未设占位值时元素高度为0，引发布局塌陷与交互错乱。
直接加 content-visibility: auto 不仅不能提速，反而会让滚动条猛缩、内容上跳——真正起效的前提是配对设置 contain-intrinsic-size，且值必须合理。
为什么只写 content-visibility: auto 会更卡
浏览器对设了 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，子项仍可能塌陷。
- Grid 容器建议直接在 grid item 上设
contain-intrinsic-size，别指望父容器统一撑开 - 别在 flex 或 grid 的直接子项上无脑加，先确认结构是否“可隔离”
- Flex 中需额外加
align-items: flex-start避免基线对齐错位
兼容性兜底和 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触发重绘：element.classList.add('force-update')，再setTimeout(() => element.classList.remove('force-update'), 1)
最常被忽略的点是：值写成 0 或留空，和完全不写效果一样；动态内容（如富文本加载、折叠展开）必须在首次渲染后立刻更新 containIntrinsicSize，而不是等滚动进入才补——否则占位失真，滚动抖动无法避免。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
