直接写 style="contain: paint" 往往无效，因浏览器需在首次 layout 阶段识别该声明；动态设置不会触发重算隔离边界，且需搭配 layout 并规避 height:auto、flex/grid 等冲突样式，否则静默失效。
为什么直接写 style="contain: paint" 往往没用
浏览器对 contain 的生效有硬性前提：它必须在首次 layout 阶段就“看到”该声明。如果元素已插入 DOM、完成初始渲染，再通过 el.style.contain = 'paint' 动态设置，Chrome 和 Firefox 会应用该值，但**不会回溯重做隔离边界计算**——重绘范围依然扩散到外部。
- 常见现象：控制台能看到
getComputedStyle(el).contain返回"paint"，但 Paint Flashing 仍满屏闪烁 - 根本原因：contain 是渲染上下文建立时的“契约”，不是运行时开关
- 正确时机：必须在
document.createElement()后、appendChild()前赋值；Vue 中应在beforeMount或created阶段设 class，而非mounted后操作style
contain: paint 单独用在 style 属性里风险很高
只设 paint 无法阻止子元素尺寸变化引发的父级重排。比如一个徽标组件内 span 文字变长，即使加了 style="contain: paint"，父容器仍可能被撑开、触发外层滚动条跳动。
- 真实场景：Ladda 按钮加载中文字从 “提交” 变成 “提交中…”，
contain: paint不拦高度变化 - 必须搭配
layout：写成style="contain: layout paint"才能同时锁住布局影响和绘制边界 - 别信
contain: content：Chrome 120+ 已废弃，行为不稳定，且不含style，主题切换时伪类可能泄漏
哪些 style 写法会让 contain 直接失效
就算你写了 style="contain: layout paint"，只要配套样式违反约束，浏览器会静默忽略整个声明——查 computedStyle 看不到报错，但 DevTools 里 Paint Flashing 照样乱闪。
-
height: auto或min-height: min-content：contain: layout 要求高度可预测，否则降级为无隔离 -
display: flex或display: grid的父容器：flex/grid 布局依赖外部上下文，加 contain 后子项排列异常 -
position: absolute子元素未配contain: paint：绝对定位脱离文档流，浏览器判定“越界”，layout 隔离失效 - 动态 JS 修改宽高后未同步更新 style：比如 resize 后只改了
el.style.width，但忘了重设el.style.contain，旧隔离边界作废
生产环境用 style 动态设 contain 必须带检测
Safari 15.4+ 支持 layout 和 paint，但对 size 实现不全；iOS 微信 X5 内核基本不识别 strict。直接写死 style="contain: strict" 在部分设备上等于没写。
- 安全写法：
if ('contain' in document.documentElement.style) { el.style.contain = 'layout paint'; } - 不要在
requestAnimationFrame里反复 toggle：el.style.contain = ''→'layout paint'→''会强制浏览器重建渲染上下文，开销比不加还大 - 验证是否真生效：打开 Chrome DevTools → Rendering → 勾选 “Paint Flashing”，然后触发局部更新，闪光区域必须严格卡在目标元素内框
contain 就只是 CSS 文件里一行安静的注释。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
