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