必须同时使用contain: layout paint并设置显式尺寸（如min-height），否则浏览器因无法确认边界而静默忽略隔离；需配合position: relative防止绝对定位元素逃逸，且js动态插入前须手动设置style.contain。
在 H5 页面中，用 contain 隔离动效区域，核心是让浏览器明确“这里的变化不会波及外面”，从而跳过对全局布局和绘制的反复检查。但直接写 contain: layout paint 很可能没效果——关键不在“写了没”，而在“能不能信”。
必须同时写 layout + paint，且容器要有可预测尺寸
只写 layout，动效改颜色、透明度、图标状态，仍会触发父级样式重算；只写 paint，动效撑高容器（比如展开动画、文字换行），兄弟元素立刻重排。二者缺一不可。
- 显式设
min-height或height，例如min-height: 120px；height: auto、min-height: min-content会让浏览器直接忽略隔离 - Flex/Grid 子项加
contain，父容器也得有确定高度约束，不能只靠flex: 1 - 响应式场景慎用
clamp()，部分浏览器视口缩放时判定为“尺寸不可控”
动效区域选型：哪些地方加真有用
重点找“内容频繁变化 + 高度稳定”的局部区域，避免套在根容器或浮动层上。
-
.modal-content、.dropdown-menu：加contain: layout paint可切断滚动时整页重绘，尤其内部有 icon 切换或骨架屏动画 -
.card或列表项：height固定且含动态 badge、状态标签时，隔离后能避免兄弟项位置抖动 - 轮播图容器、进度条包裹层：动效仅限内部尺寸/透明度变化，外部布局完全不受扰
- 避开
body、#app、.navbar等根级容器——它们本身尺寸不可控，加了等于白加
绝对定位动效要额外处理包含块
动效区域若含 position: absolute 元素（如 Tooltip、下拉箭头、拼写提示线），contain: paint 会裁剪溢出，但定位基准可能逃逸到 body，导致菜单闪退、提示线错位。
- 给动效容器自身加
position: relative，确保它成为绝对定位元素的包含块 - 不要对
transform动画节点直接套contain: strict，它会截断backdrop-filter或filter效果 - 动效收起后若需复用，记得清空
el.style.contain = ''，否则高度可能被锁死
JS 插入或切换前必须手动设置
H5 中大量使用 JS 动态插入 DOM（如 v-if、show 类控制），这时 CSS 声明来不及生效。
- 插入子节点前，先执行
el.style.contain = 'layout paint' - 插入后若需展开动画，确保初始状态已设好尺寸（比如
max-height: 0+overflow: hidden） - 生产环境加运行时检测：
if ('contain' in document.documentElement.style)，Safari 和 iOS 微信 X5 内核支持有限
不复杂但容易忽略：浏览器看到 contain: layout paint 不代表真隔离，得看动效过程中 Layout Shift Regions 是否收缩、Paint Flashing 是否局限在容器内。别只查 getComputedStyle。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
