CSS contain-intrinsic-size 怎样避免 content-visibility 布局跳动

长列表里把卡片设置为 content-visibility: auto 后，浏览器可以跳过屏外内容的渲染；但如果被跳过的卡片没有一个接近真实内容的尺寸，滚动到它附近时就可能重新计算高度，让后面的内容整体移动。解决办法不是给所有卡片写死最终高度，而是为尺寸包含提供一个可接受的预估值：把 contain-intrinsic-size 和 content-visibility: auto 放在同一个内容容器上。

官方文档：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/contain-intrinsic-size

先理解为什么屏外卡片会让页面跳动

content-visibility: auto 的价值在于让屏外元素暂时不渲染内容，从而减少不必要的布局和绘制工作。可是布局仍然需要知道这个元素大概占多大空间；如果尺寸包含把它当成没有内容的盒子，卡片高度就可能接近零。等卡片进入需要显示的区域，真实子内容参与布局，前后高度差就会推开后续卡片。

因此这里有两个不同的尺寸概念：占位尺寸是跳过内容时参与布局的估计，真实尺寸是内容被正常渲染后的结果。目标是让占位尺寸足够接近真实尺寸，而不是用 CSS 伪造一个永远不变的高度。

用 contain-intrinsic-size 给卡片准备占位高度

下面的例子假设文章卡片通常在 360px 到 480px 之间，先选一个接近中位数的 420px。这里的长度是布局估计，不代表内容会被裁剪；卡片真正显示时仍由内部文本和图片决定高度。

.article-card {
  /* 允许浏览器跳过屏外卡片的内容渲染。 */
  content-visibility: auto;

  /* 屏外布局先按代表性高度预留空间，减少滚动时的高度修正。 */
  contain-intrinsic-size: auto 420px;

  /* 图片先保留比例，避免图片尺寸成为另一种跳动来源。 */
  aspect-ratio: 16 / 9;
}

组合关系可以这样记：content-visibility 决定内容是否可以暂时不参与渲染，contain-intrinsic-size 告诉布局系统在尺寸包含期间使用什么“像是内容已经存在”的尺寸。不要只写后者而忘记前者；在 content-visibility 为 visible 或 auto 的某些状态下，改变这个尺寸值不会产生你期待的可见差异。

auto 值适合内容高度会变化的卡片

auto 420px 的好处是给出初始估计，同时允许浏览器在元素曾经正常渲染后记住实际尺寸。对于文章摘要、评论串这类“多数接近，但偶尔特别长”的内容，它比永远固定一个高度更有弹性。

.feed-card {
  /* 初次遇到屏外内容时使用 420px；正常渲染后可复用记住的尺寸。 */
  contain-intrinsic-size: auto 420px;
  content-visibility: auto;
}

.feed-card--dense {
  /* 另一类卡片单独估值，不要让一个平均数覆盖所有内容类型。 */
  contain-intrinsic-size: auto 280px;
}

估值应按内容类型拆分：短标题卡片、带长摘要的卡片和带图片的卡片通常不是一个分布。可以先从真实页面中挑一组有代表性的卡片，取一个保守的近似高度，再观察滚动时是否出现明显的整体位移。这个过程是在校准布局契约，不是把 420px 当成官方推荐值。

估值不准时，网格和滚动位置会放大差异

如果估计高度比真实高度小很多，浏览器在卡片显示后需要向下补空间；如果估计过大，则可能回收空间。单个卡片的差异不一定明显，但在网格或多栏布局里，显式尺寸与内容高度的组合可能让轨道分配和父容器溢出更难预测。

这时不要用 0px 作为万能占位值。对于没有记忆值的网格和多栏场景，可以考虑 auto none，让没有可复用尺寸时回到无内容的 intrinsic size 语义，再通过外层布局约束和明确的图片比例降低突变风险：

.news-grid__item {
  /* 有记忆值时使用记忆值；没有记忆值时不强行伪造 0px 高度。 */
  contain-intrinsic-size: auto none;
  content-visibility: auto;
}

.news-grid__item img {
  /* 给替换元素一个稳定比例，避免图片加载再次改变卡片空间。 */
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

上线前把兼容边界和误用分开

第一，不要把 contain-intrinsic-size 当成内容可见性开关；它只提供尺寸。第二，不要把 content-visibility: hidden 当成 display: none 的简单别名，两者对渲染状态和布局语义不同。第三，图片、广告占位和异步字体仍可能改变真实尺寸，CSS 占位值只能解决尺寸包含这一层。

如果目标浏览器不支持这组特性，普通文档流仍应能展示内容：不要把关键内容依赖在被跳过的状态上，也不要给旧浏览器设置必须配合隐藏内容才能工作的固定高度。实际采用时可以按下面的清单收束：

• 只有长列表、屏外内容确实带来布局/绘制成本时，才使用 content-visibility: auto。
• 按卡片类型设置代表性高度，不要把一个极端样本当全站默认。
• 图片使用明确的尺寸或宽高比，避免网络资源成为第二个布局变量。
• 在网格、多栏和内容高度差异很大的页面上优先小范围启用，确认占位策略符合页面结构。

常见问题

contain-intrinsic-size 会把卡片固定成 420px 吗？

不会。它是在尺寸包含、内容被跳过时使用的内在尺寸提示；内容正常参与布局后，真实高度仍由内容和其他 CSS 约束决定。

为什么写了属性，页面还是会跳动？

最常见原因是估计值与真实高度相差太大，或者图片、字体、异步内容没有自己的尺寸约束。先把卡片按内容类型分组，再分别校准代表性高度。

是不是所有卡片都应该使用 auto 420px？

不是。长度只是示例值。短卡片、长摘要卡片和图片卡片应使用不同估计，不能把示例数字当成普适配置。