CSS contain-intrinsic-size 如何减少内容跳动

长列表开启 content-visibility: auto 后，浏览器可以跳过屏幕外内容的渲染，但如果没有一个合理的替代尺寸，容器就可能暂时像“没有子元素”一样塌缩，滚动时再突然变高。减少这种内容跳动的关键是把 contain-intrinsic-size 放到同一个容器上，用接近真实内容的高度为被跳过的区域占位。

先分清：它为什么能托住被跳过的内容

contain-intrinsic-size 是给尺寸包含元素提供“替代内在尺寸”的 CSS 属性。尺寸包含会让元素布局时近似按没有子内容处理；没有替代尺寸时，块高度在很多场景下可能接近 0。content-visibility: auto 会对离屏内容采用这种跳过策略，所以二者常常一起出现。

因此，单独写下面这句，通常不会让一个正常可见的卡片变成 420px：

.card {
  /* 仅提供尺寸包含时使用的估算值，不会替代普通内容布局 */
  contain-intrinsic-size: 420px;
}

真正的使用场景是：

.feed-card {
  /* 离屏时跳过内部渲染，减少长列表的计算量 */
  content-visibility: auto;
  /* 首次跳过时按约 420px 占位，避免父列表高度塌缩 */
  contain-intrinsic-size: auto 420px;
}

这里的 auto 表示：元素曾经正常渲染并留下尺寸记忆时，优先使用记忆值；没有记忆值时，使用后面的长度。它不是“自动测量当前未渲染内容”，所以长度仍然需要一个靠谱的初始样本。

用同类卡片的真实平均高度设置初始占位

如果文章卡片大多由标题、摘要和一张图片组成，可以先从已渲染的 20～30 个同类卡片取中位数，而不是拿最长卡片当标准。比如中位数接近 420px，就先把 420px 作为块方向的估值。卡片宽度由网格或父容器决定时，也可以使用逻辑属性只关注块尺寸：

.article-card {
  /* 保持普通宽度规则，只给离屏卡片预留块方向高度 */
  content-visibility: auto;
  contain-intrinsic-block-size: auto 420px;
  /* 长内容允许自然撑开，不把估值当成固定 height */
  min-block-size: 0;
}

@supports not (contain-intrinsic-block-size: auto 420px) {
  .article-card {
    /* 不支持时回到普通渲染，内容仍可访问 */
    content-visibility: visible;
  }
}

不要把这 420px 理解为固定高度：它只服务于尺寸包含阶段。内容进入渲染范围后，标题换行、图片比例和摘要长度仍会决定真实尺寸。如果真实高度明显偏离估值，首次靠近该卡片时仍会发生一次布局调整，只是不会经历从零高度开始的剧烈变化。

怎么判断估值有效，而不是把跳动推迟

先观察三个现象：离屏时列表占位是否稳定，卡片首次进入视口时自身高度改变了多少，滚动条位置是否因父容器重排而突然移动。测试时要固定视口宽度，并分别覆盖短标题、长标题、图片慢加载和窄屏换行；只在快速刷新下看起来顺滑，不能说明估值正确。

可以临时记录 Layout Shift，帮助判断是不是仍有明显的非用户操作位移：

let clsValue = 0;

// 只累计没有用户输入参与的布局位移，便于对比两组 CSS 估值
const shiftObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
    }
  }
  console.log('当前 CLS：', clsValue.toFixed(4));
});

// buffered 让脚本晚于首屏加载时也能收到已有的布局位移记录
shiftObserver.observe({ type: 'layout-shift', buffered: true });

这段观察值只能说明位移变化，不能证明位移一定由 contain-intrinsic-size 引起。图片没有 width/height 或 aspect-ratio、字体替换、异步插入广告位，同样会造成跳动。先为媒体预留尺寸，再调卡片估值，定位会更可靠。

兼容降级与容易踩到的边界

对于不支持该属性的浏览器，渐进增强的重点是让内容继续正常显示。对于支持的浏览器，也不要用一个偏大的估值掩盖错误的图片尺寸、异步 DOM 插入或组件内部固定高度。占位越接近真实尺寸，收益越稳定。

常见问题

contain-intrinsic-size 能替代 height 吗？

不能。它是尺寸包含期间的替代内在尺寸，不是普通布局中的固定高度；内容正常渲染后仍会按实际内容计算。

为什么只写 contain-intrinsic-size 看不到效果？

因为元素没有进入尺寸包含状态。先确认 content-visibility: auto、contain: size 或包含尺寸的其他能力是否确实应用在目标元素上。

420px 应该怎么选？

用相同宽度、相同组件结构的一组真实内容取中位数，再在窄屏、长标题和慢图片条件下复测。它是首个占位估值，不是必须长期不变的常量。

把它当作“给被跳过内容预留合理空间”的工具即可：先确保尺寸包含生效，再用样本设定估值，最后把首次进入视口的高度变化与其他布局位移原因分开验证。