contain: layout paint 必须同时使用且配显式尺寸才生效，单用任一值或缺尺寸会导致浏览器静默忽略；二者共存可切断布局外溢与绘制扩散，显式高度如min-height是硬性前提。
contain: layout paint 必须同时写，单用等于白配
只加 contain: layout，元素位置或尺寸一变（比如 transform 移动、visibility 切换），父容器仍会重排；只加 contain: paint，哪怕只是文字撑开高度，也会导致外部布局抖动。二者必须共存，才能切断“布局外溢”和“绘制扩散”两条链路。
常见错误现象：getComputedStyle(el).contain 返回 "layout paint"，但滚动/动画时帧率没提升——大概率是浏览器静默忽略了它，不是 CSS 没写对。
显式尺寸是硬门槛，flex: 1 或 height: auto 会让隔离失效
浏览器对 contain: layout 容器有尺寸可信度要求：它得能提前确认边界。以下写法都会让隔离不生效：
-
height: auto、min-height: min-content -
flex: 1且父容器无固定高度约束 -
width: fit-content或依赖内容撑开的宽高
稳妥写法示例：min-height: 240px; max-height: 600px; overflow-y: auto;。下限防塌陷，上限锁死重绘区域，尤其适合下拉菜单、弹窗这类定位频繁变动的容器。
绝对定位元素加 contain 要小心 containing block 偏移
给 position: absolute 的元素（如 .dropdown-menu）加 contain: layout paint，会创建新的 containing block，导致其 top/left 计算基准从最近定位祖先变成自身，视觉上突然偏移。
解决办法：
- 确保该元素的定位上下文稳定（比如父级设
position: relative且尺寸可控） - 避免在
transform动画根节点上直接套contain: strict，它会隔离font-size、color等继承属性，可能截断filter或backdrop-filter效果 - 若必须用
strict，优先用于 Modal、Tooltip 这类完全独立浮层，而非嵌套在布局流中的定位元素
JS 动态插入前必须手动设 style.contain
Vue/React 中通过 v-if 或 useState 控制显示的弹层，DOM 插入瞬间就会触发重排——此时 CSS 规则还没来得及生效。
正确时机：
- 插入大量子节点前，先执行
el.style.contain = 'layout paint'; - 收起时若用了
height: 0+overflow: hidden动画，记得清空：el.style.contain = ''，否则真实高度变化后，contain会继续按旧尺寸隔离，造成错位 - 搭配
content-visibility: auto时，contain-intrinsic-size必须设像素值（如contain-intrinsic-size: 80px），不能用em或%
真正生效与否，不能只看 CSS 是否写了，得打开 Chrome DevTools → Rendering → 勾选 “Paint flashing” 和 “Layout Shift Regions”，看高频变动区域是否真的被框住、不再泛红。 Safari 和 iOS 微信 X5 内核对 size 支持不全，上线前务必用 'contain' in document.documentElement.style 做运行时检测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
