直接写 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 照样乱闪。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 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”，然后触发局部更新，闪光区域必须严格卡在目标元素内框

真正起效的 containment，从来不是靠多写一个 style 属性，而是让浏览器在渲染第一帧前就确认“这里自成一体”。尺寸写死、子元素不逃逸、JS 设置不拖到挂载后——漏掉任何一环，contain 就只是 CSS 文件里一行安静的注释。