移动端复杂列表应仅在单个列表项（.list-item）上设 contain: layout paint 并配 height 或 min-height；切勿加在容器上，否则因尺寸不可预测导致滚动卡顿、渲染异常及滚动条错乱。
直接结论：对移动端复杂列表，只在单个列表项（如 .list-item）上设 contain: layout paint，并配 height 或 min-height；千万别加在列表容器（.list）上，否则滚动卡顿会更严重。
为什么列表容器加 contain 反而坏事
移动端列表常依赖 flex/grid 布局自动撑高，而 contain: layout paint 要求容器自身有可预测尺寸——.list 用 flex: 1、height: auto 或 min-height: min-content 时，Chrome 和 Safari 会静默忽略该声明，你查 getComputedStyle(el).contain 还是返回字符串，但重排照常发生。
更糟的是，给容器加 contain: strict 或 contain: content 会导致：
- 子项高度变化无法反馈给父容器，滚动条高度错乱
- iOS Safari 16.4 以下版本直接不支持
paint，整块区域渲染异常 - React/Vue 中列表重渲染时，框架插入时机可能绕过 containment 生效窗口
contain: layout paint 必须配显式高度才生效
浏览器只认“写死的”或“有下限的”尺寸。对每个 .list-item，必须显式声明高度边界：
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
height: 80px、min-height: 80px、aspect-ratio: 4/1 - ❌ 禁用：
height: auto、flex: 1、min-height: max-content、width: fit-content - ⚠️ 响应式慎用：
min-height: clamp(60px, 5vh, 120px)—— 部分 Android Chrome 在视口缩放时判定为不可预测
示例写法：
.list-item {
contain: layout paint;
height: 80px;
overflow: hidden;
}
移动端特殊坑：图片加载和绝对定位元素会逃逸
列表项里若含图片或 position: absolute 子元素（如状态角标、删除按钮），contain: paint 默认只裁剪绘制，但不拦布局溢出——图片加载撑开高度、角标定位到屏幕外，都会破坏隔离效果。
- 图片必须加
height+object-fit: cover，禁用width: 100%不设高 - 绝对定位子元素需确保其包含块是该
.list-item自身（即父级设position: relative） - 滚动中出现内容闪动或错位，优先检查是否漏了
overflow: hidden配合paint
别碰 contain: content 和 content-visibility: auto 组合
很多文章鼓吹这个组合用于长列表，但在移动端实际落地极难：
-
contain: content不含size，列表项高度动态时，getBoundingClientRect().height会抖动，导致虚拟滚动锚点漂移 -
content-visibility: auto必须配contain-intrinsic-size: 80px（仅支持 px 单位），漏掉就会滚动条抽搐、内容上跳 - Android Chrome 需手动开启
chrome://flags/#enable-content-visibility，线上不可控
真实项目中，contain: layout paint + 固定高度 + overflow: hidden 是目前最稳、兼容性最好、无需 JS 协助的方案。
