加 content-visibility: auto 必须配 contain-intrinsic-size，否则因高度塌缩导致滚动抖动、点击错位；该值需用具体像素精确声明，且优先级高于子元素 height，不支持相对单位。
content-visibility: auto 能压千个按钮的首屏渲染耗时，但只加这行 CSS 会更卡——滚动条猛缩、按钮集体上跳、点击位置错乱，根本原因是没配 contain-intrinsic-size。
为什么直接给按钮加 content-visibility: auto 会滚动抖动
浏览器对设了 content-visibility: auto 的元素，默认跳过 layout 和 paint，getBoundingClientRect().height 和 clientHeight 全返回 0。1000 个按钮，每个真实高 48px，未渲染时全算成 0，整个列表容器高度塌成一条线。用户一滑，滚动条突然拉长、内容往上猛跳、手指点不到原来位置。
这不是优化，是布局承诺失效：content-visibility: auto 默认启用 size containment，等于向浏览器声明“这个盒子就是空的”，必须用 contain-intrinsic-size 显式承诺占位尺寸。
- 不写
contain-intrinsic-size→ 等同于没开content-visibility - 写成
contain-intrinsic-size: 0→ 布局彻底塌缩，比不写还糟 - 子元素写了
height: 48px→ 不会覆盖contain-intrinsic-size，后者优先级更高
contain-intrinsic-size 怎么设才不翻车
这不是估算，是向浏览器做的尺寸占位承诺，值必须是具体像素（px），不支持 %、em、rem。移动端尤其不能照搬 PC 写法或等 JS 注入——首屏就抖。
- 按钮固定高（如
48px）：直接写contain-intrinsic-size: 48px - 按钮含图标+文字且行数浮动（如文字换行导致高度在 48–72px 之间）：宁大勿小，写
contain-intrinsic-size: 72px - 按钮带悬停动画或焦点边框（视觉高度略增）：额外加 4–8px 安全余量，例如
76px - 横向宽按钮（如全屏宽度按钮）：用双值写法
contain-intrinsic-size: 100vw 48px，但注意vw在部分旧版 Safari 中不被识别，稳妥起见仍用固定像素，比如375px 48px（适配主流 iPhone 屏宽）
哪些地方加了反而让按钮不可点或失焦
content-visibility: auto 不是 display: none 替代品，套错位置会直接破坏交互：
- 按钮父容器用了
overflow: hidden→content-visibility强制 layout containment，会截断按钮悬停阴影或下拉菜单溢出 - 按钮本身有
position: fixed或在position: sticky导航栏里 → 隔离后脱离定位上下文，按钮飘到左上角 - 按钮依赖
IntersectionObserver触发懒加载或埋点 → 未渲染时 observer 不触发，得在content-visibility切为visible后手动补发回调 - SSR 直出 HTML 时就加该属性 → JS 还没执行，用户看到的是空白按钮区；应 SSR 时设
content-visibility: visible，hydration 完成后再切为auto
兼容性兜底和渐进增强必须做
Firefox for Android、iOS Safari ≤ 16.4、所有 IE 版本都不支持 content-visibility。强行使用且无降级，页面在这些环境里会退化成全量渲染，甚至布局错乱。
必须用 @supports (content-visibility: auto) 包裹规则，里面写降级方案：
button.long-list-item {
@supports (content-visibility: auto) {
content-visibility: auto;
contain-intrinsic-size: 48px;
}
@supports not (content-visibility: auto) {
opacity: 0.99; /* 保留占位 + 无障碍可读，比 display: none 更安全 */
}
}
真正容易被忽略的是：按钮高度微小变化（比如字体加载完成、icon 渲染延迟）会导致 contain-intrinsic-size 占位不准，哪怕只差 1px，滚动进入时也会触发 layout shift。所以如果按钮样式强依赖字体或图标资源，建议初始设保守值（如 64px），等关键资源就绪后用 JS 动态更新 element.style.containIntrinsicSize。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
