contain: layout paint 仅在容器有可控尺寸时生效，否则浏览器静默忽略；加在尺寸不可控或绝对定位元素上反而导致布局错乱或性能下降。
直接加 contain: layout paint 通常没用，除非你同时给容器设了可控尺寸——浏览器会静默忽略，连 DevTools 里看到值也不代表它真生效。
为什么 contain: layout paint 却没减少 Paint Flashing？
根本原因是浏览器要求该组合必须有可预测的尺寸上下文，否则隔离逻辑直接跳过。这不是兼容性问题，是规范强制行为。
- 写了
contain: layout paint但容器是height: auto或min-height: min-content→ 等于没写 - Flex/Grid 容器里的子项加了
contain，但父容器没设min-width或固定宽高 → 同样失效 - DevTools 中
getComputedStyle(el).contain返回"layout paint"，不代表实际触发了隔离
哪些场景加了反而更卡？
Contain 不是万能胶，乱贴会破坏原有布局逻辑，尤其在 Bootstrap 或动态组件中。
- 给
position: absolute的.dropdown-menu加contain: layout→ 创建新 containing block，菜单定位偏移 - 在
.modal内部加contain: strict→ 子项高度被锁死，滚动内容塌陷成一条线 - JS 动态插入大量节点前没先设
el.style.contain = 'layout paint'→ 插入过程仍触发父级重排 - 收起折叠区域后没清空
el.style.contain→ 容器高度可能被 size containment 锁死
移动端长列表怎么安全用 contain: paint？
这是提升滚动帧率最有效的单点优化，但必须避开几个关键陷阱。
立即学习“前端免费学习笔记（深入）”；
- 只加在滚动容器（如
.list-wrapper）上，别加在body或#app根节点 - 避免用于含
position: absolute重叠或依赖overflow: hidden裁剪的列表项 - iOS Safari 不支持
contain: strict，实测contain: paint在 iOS Safari 16.4+ 可靠，X5 内核（微信）基本不支持 - 若列表项内有骨架屏动画，对动画元素单独加
contain: paint，而不是整行加
验证是否真起效，别信 CSS 声明
打开 Chrome DevTools → Rendering 面板 → 勾选 Paint Flashing 和 Layout Shift Regions，然后滚动或点击交互：
- 闪光区域应明显收缩，仅限目标容器内部
- Performance 面板里
Layout时间块没降？说明contain: layout没生效，回头检查尺寸约束 - 生产环境务必做特性检测：
if ('contain' in document.documentElement.style)
真正难的不是写那行 CSS，而是判断“这个盒子到底能不能被可靠地切出去”——尺寸不可控的地方，contain 就是摆设。
