contain需满足三点才生效：非inline/static定位、已挂载且样式计算完成、祖先无will-change/blur/opacity干扰；content等价layout paint size style，strict多size隔离更严；须用Layers面板验证是否生成独立图层。
contain 属性怎么写才真正起作用
直接写 contain: paint 或 contain: layout 很可能没效果——浏览器只在满足“可隔离前提”时才启用优化。它不是开关，而是声明式契约。
必须同时满足以下三点：
- 目标元素不能是
display: inline或position: static（默认值），推荐用display: block、flex或grid - 不能加在动态插入的临时节点上（如 JS 创建后立刻加
contain），需确保元素已挂载且样式计算完成 - 祖先元素不能有
will-change: transform、filter: blur(0)或opacity: 0.99——这些会提前创建嵌套层叠上下文，把你的contain包进去，反而削弱隔离效果
常见误用：div { contain: content; } 看似完整，但若该 div 是 inline 子元素（比如放在 p 里），浏览器会静默忽略整个声明。
contain: content 和 contain: strict 的实际差异
contain: content 是常用简写，等价于 contain: layout paint size style；contain: strict 多了一个 size，意味着连元素自身尺寸变化都不会影响外部布局流。
选哪个，取决于你是否允许子元素尺寸变动“泄露”出去：
- 用
contain: content：适合卡片、列表项这类内部高度可能随内容伸缩，但你不希望每次换图/加载文本就让父容器重排 - 用
contain: strict：适合广告位、第三方 widget、固定高宽的弹窗容器——它强制浏览器把该区域当“iframe”处理，哪怕子元素font-size改变，也不会触发父级重排 - 别用
contain: paint单独出现：它只禁用渲染传播，但不锁布局，子元素width变化仍会让外层重排，容易误判为“没生效”
为什么加了 contain 还在重绘？先查 Layers 面板
DevTools 的 «Layers» 面板才是唯一可信依据。如果目标元素没显示为 “Isolated Layer Root” 或类似标识，说明隔离失败，不是性能问题，而是声明未被采纳。
高频静默失效原因：
- 父容器用了
transform: translateZ(0)（尤其轮播组件）——它创建了新层叠上下文，把contain容器包进去了，隔离范围被收窄 - 元素上有
backdrop-filter：该属性自带隐式contain: strict，再叠加你的contain不会增强，反而可能冲突 - 使用了 CSS-in-JS 库（如 Emotion）动态注入样式：某些版本会把
contain规则塞进标签末尾，而浏览器解析顺序导致它被后续规则覆盖
验证方法：右键元素 → «Show layers»，看是否出现独立图层；没有，就别调动画或测 FPS，先修隔离。
移动端特别要注意的兼容与陷阱
iOS Safari 15.4+ 支持原生 contain，但 iOS 15.3 及更早版本不支持 strict 和 content，只认 layout、paint、style 单值。微信小程序基础库 2.28.0+ 才开始支持 contain: paint，旧版直接忽略。
安全写法：
.card {
contain: layout paint;
-webkit-contain: layout paint;
}
@media (min-width: 768px) {
.card {
contain: content;
-webkit-contain: content;
}
}
关键提醒：不要对 body 或整页根容器加 contain。它会切断所有后代元素与全局环境的联系，导致 position: fixed 错位、z-index 失效、甚至 scroll 事件监听异常——隔离粒度必须落在具体组件容器上，而非布局顶层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
