content-visibility: auto 必须配对设置 contain-intrinsic-size 才有效，否则滚动条猛缩、内容上跳；该值须为具体像素，不可为0或留空，且在flex/grid子项上需谨慎使用。
直接加 content-visibility: auto 不能解决问题，反而会让滚动条猛缩、内容上跳——真正起效必须配对设置 contain-intrinsic-size，且值要写对。
为什么只写 content-visibility: auto 会更卡
浏览器对未渲染的元素默认返回 clientHeight 和 getBoundingClientRect().height 为 0。1000 个真实高度 120px 的卡片，全按 0 算，整个滚动容器高度塌成一条线。用户一滑，滚动条突然回弹、内容往上猛跳、手指拖动位置错乱。
- 根本原因是
content-visibility: auto默认启用 size containment，没contain-intrinsic-size就等于向浏览器承诺“这个盒子就是空的” -
display: none是移除占位，content-visibility: auto是保留占位但跳过渲染——语义和行为完全不同 - 子元素的
height或min-height不会覆盖contain-intrinsic-size，它优先级更高
contain-intrinsic-size 怎么设才不翻车
这不是估算，是向浏览器做的尺寸占位承诺。写错值或留空，效果等同于没设。
- 值必须是具体像素（
px），不支持%、em、rem等相对单位 - 卡片类（固定高）：
contain-intrinsic-size: 120px - 文字流式项（多行、高度浮动）：
contain-intrinsic-size: 160px（宁大勿小，小了会撑破占位触发重排） - 网格项需控宽高：
contain-intrinsic-size: 300px 240px - 横向长表格只控宽：
contain-intrinsic-size: 800px 0（高度仍由内容撑开） - 严禁写成
contain-intrinsic-size: 0或留空
在 Flex/Grid 容器里容易失效的坑
content-visibility: auto 在 Flex/Grid 直接子项上无脑加，大概率失效或错位。
- Flex 容器默认基线对齐，子项初始高度为 0，会导致父容器拉伸异常；建议加
align-items: flex-start - Grid 容器中，
contain-intrinsic-size必须写在 grid item 上，别指望父容器统一撑开 - 避免在
flex或grid的直接子项上设，先确认结构是否“可隔离” - 如果用了
display: grid+repeat()渲染大量项，本质仍是全量 DOM —— 卡顿根源不在 Tailwind，而在没做虚拟滚动
@supports 兜底和 JS 交互避坑
Firefox for Android、iOS Safari ≤ 16.4、所有 IE 版本都不支持 content-visibility。强行使用且无降级，页面会退化成全量渲染甚至布局错乱。
- 必须用
@supports (content-visibility: auto)包裹规则，并提供降级方案，比如opacity: 0.99或visibility: hidden - JS 动态控制显隐时，千万别用
element.style.display = 'block'切换——这会破坏已缓存的渲染状态 - 需要手动触发重绘（如富文本加载完成），临时加 class 更安全：
element.classList.add('force-update')，再setTimeout(() => element.classList.remove('force-update'), 1) - 服务端若返回分页游标（cursor），就别传 total count —— 虚拟滚动不需要知道总条数
最常被忽略的一点：content-visibility: auto 只解决离屏渲染开销，不解决滚动帧率卡顿。如果列表还在掉帧，问题大概率出在 scroll 事件里读取了 scrollTop、没加 { passive: true }、或者没用虚拟滚动方案——这时候加再多 CSS 属性也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
