根本原因是content-visibility: auto跳过不可见元素渲染，导致其DOM占位高度默认为0px；当元素进入视口渲染时高度突变，引发文档高度重算和滚动条抖动。
content-visibility: auto 为什么会导致滚动条跳动
根本原因是：浏览器在跳过不可见区域元素的渲染时，不会计算其真实高度，DOM 占位高度默认为 0px。当用户滚动、元素进入视口并开始渲染，高度突然从 0 变为实际值（比如 56px），整个文档高度瞬间增长，滚动条长度和位置被迫重算——这就是抖动的来源。
这不是 bug，而是 content-visibility: auto 的默认行为。它只承诺“延迟渲染”，不承诺“预留空间”。如果你没给浏览器一个高度预期，它就按最小可行尺寸（即 0）来布局容器。
contain-intrinsic-size 怎么填才有效
contain-intrinsic-size 不是“设置固定高”，而是告诉浏览器：“这个元素**大概有多高**，请按这个值预留占位”。它接受单值或双值语法：
-
contain-intrinsic-size: 50px→ 等价于contain-intrinsic-size: 50px 50px（宽高都设为 50px） -
contain-intrinsic-size: 1px 5000px→ 宽 1px，高 5000px（适合列表项高度差异大但最大不超过 5000px 的场景） - 不能用百分比、
auto或fit-content—— 这些值会被忽略
关键点：值要接近真实内容的**自然高度均值**。比如列表项平均高 48px，就写 48px；如果高度波动大（32–72px），可取中间值 52px 或略保守一点的 60px。填得越准，滚动条越稳。
立即学习“前端免费学习笔记（深入）”；
常见错误写法与后果
以下写法看似合理，实则无效或适得其反：
- 只加
content-visibility: auto，不配contain-intrinsic-size→ 必抖 -
contain-intrinsic-size: 0或contain-intrinsic-size: auto→ 浏览器当没写，等同于没设 - 把
contain-intrinsic-size写在父容器上，但content-visibility: auto在子元素 → 不生效，必须作用于同一元素 - 对动态高度内容（如含图片、异步加载文本）硬写死一个固定值 → 高度预估偏差大，仍可能轻微跳动
真要用在图文混排列表里，建议先用 JS 测量几条典型项的真实高度，再取中位数设为 contain-intrinsic-size。
兼容性与 fallback 要不要做
截至 2026 年 4 月，content-visibility 已在 Chrome 93+、Edge 93+、Firefox 103+、Safari 17.4+ 原生支持。iOS Safari 17.4 是关键分水岭——此前版本（如 iOS 16.x）完全不识别该属性，会静默忽略。
所以不需要 JS 检测 + 动态插入样式，直接写就行：
ul.long-list {
content-visibility: auto;
contain-intrinsic-size: 56px;
}
老浏览器看到不认识的属性就跳过，页面照常渲染，只是没优化。但别把它和 display: none 混用做降级——那会破坏语义和可访问性。
真正容易被忽略的是：预估高度一旦填错，抖动问题比不用 content-visibility 更难排查，因为现象只在滚动中出现，且 DevTools 的 Layout 面板看不出占位是否准确。
