必须配contain-intrinsic-size，否则content-visibility: auto会导致滚动抖动、点击错位；该值须用具体像素（如48px），宁大勿小，不支持相对单位，且优先级高于子元素height。
直接加 content-visibility: auto 不但不加速，反而让滚动条猛缩、按钮点不到、光标乱跳——根本原因是没配 contain-intrinsic-size，浏览器把未渲染元素当成了高度为 0 的空盒子。
为什么只写 content-visibility: auto 会更卡
这个属性默认启用 layout containment，浏览器跳过 layout 和 paint，getBoundingClientRect().height 和 clientHeight 全返回 0。1000 个按钮，每个真实高 48px，没占位就全算成 0，整个容器高度塌成一条线。一滑动，滚动条突然拉长、内容上跳、点击错位。
- 这不是“优化”，是布局承诺失效：你声明“这个盒子就是空的”，但没告诉它该占多大地方
-
contain-intrinsic-size: 0比不写还糟，等于主动要求塌缩 - 子元素写了
height: 48px也无效——contain-intrinsic-size优先级更高
contain-intrinsic-size 必须用具体像素，不能靠猜
它不是样式，是向浏览器做的尺寸占位承诺，值必须是固定像素（px），不支持 %、em、rem 或 vw（旧版 Safari 不认 vw）。
- 按钮固定高 48px → 写
contain-intrinsic-size: 48px - 文字可能换行，高度在 48–72px 之间 → 宁大勿小，写
contain-intrinsic-size: 72px - 有悬停边框或阴影，视觉高度略增 → 加 4–8px 余量，比如
76px - 横向铺满的按钮（如全宽操作项）→ 用双值写法
contain-intrinsic-size: 375px 48px（适配主流 iPhone 屏宽），别用100vw
哪些地方加了反而破坏交互
content-visibility: auto 不是 display: none 替代品，套错位置会直接让按钮不可点、菜单截断、光标消失。
- 父容器设了
overflow: hidden→ 强制 layout containment 会截断按钮悬停阴影或下拉菜单溢出 - 按钮本身是
position: fixed或在position: sticky导航栏里 → 隔离后脱离定位上下文，飘到左上角 -
contenteditable="true"的编辑器容器 → 光标定位错乱、高亮失效，千万别加 - 依赖
IntersectionObserver触发懒加载或语法高亮 → 未渲染区域不会触发回调，得手动补
SSR 页面和兼容性怎么处理才不白忙
服务端直出 HTML 时 JS 还没执行，用户看到的是大片空白；Firefox 至今不支持，Safari 15.4+ 才开始支持。
- SSR 阶段先设
content-visibility: visible，hydration 完成后再通过 class 切成auto - 必须用
@supports (content-visibility: auto)包裹 CSS，否则老浏览器直接忽略整块规则 - 移动端尤其不能等 JS 注入后再设
contain-intrinsic-size——首屏就抖，得在 HTML 中静态写死保守值
最常被忽略的一点：它不解决网络请求，也不替代图片懒加载；它只管“渲染”，不管“下载”。如果你的按钮里嵌着未压缩的 SVG 或远程图标，再快的渲染也救不了首屏卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
