contain: paint 对无子元素的按钮无效，因需隔离后代渲染树；应包裹内容元素并对其设该属性，且需确保容器有明确宽高、目标浏览器版本支持。
移动端按钮加 contain: paint 为什么没效果
因为 contain: paint 不作用于按钮自身，只隔离其后代渲染树。纯文本 <button> 没有子元素，背景色切换仍触发整块重绘——浏览器根本没东西可“隔离”。
常见错误是给按钮直接加 contain: layout paint style，结果 DevTools 的 Paint Flashing 还是满屏闪。真正该做的是：把图标、文字包进 <span> 或 <div>，再对这些子容器设 contain: paint。
- ✅ 有效结构：
<button><span class="icon"></span><span class="label">提交</span></button>，然后对.icon和.label分别加contain: paint - ❌ 无效写法：
button { contain: paint; }（单层按钮无子树可隔离） - iOS Safari 16.4+ 才稳定支持
paint，低于此版本会静默忽略；Android Chrome 需开启chrome://flags/#enable-experimental-web-platform-features
响应式列表容器必须设 min-height 和 max-height
移动端列表滚动卡顿，往往不是 Vue 或 React 更新慢，而是浏览器压根没启动 containment——因为容器高度不可预测。height: auto、min-height: min-content 或 flex/gird 父容器未设尺寸时，contain: layout paint 会被 Chrome 和 Safari 静默忽略。
实测中，1000+ 条目的列表滚动帧率从 20fps 升至 58–60fps，前提是容器有明确边界：
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐组合：
.list-container { contain: layout paint; min-height: 300px; max-height: 600px; overflow-y: auto; } - ❌ 失效写法：
.list-container { contain: layout paint; height: fit-content; }（Chrome 直接跳过） - 若用
ResizeObserver动态调整高度，必须等尺寸稳定后再设contain，否则插入/删除项会触发父级重排
fixed 和 absolute 容器该用 contain: paint 而不是 strict
contain: strict 在 iOS Safari 上有已知问题：开启后，position: sticky 表头可能失灵，滚动锚点错乱。而 contain: paint 对 fixed/absolute 元素最有效——它强制浏览器把该元素及其子树当作独立绘制层，滚动时其他区域完全不动。
典型适用场景：
- ✅ 右下角客服浮窗：
.floating-btn { position: fixed; bottom: 20px; right: 20px; contain: paint; } - ✅ 可展开的 tooltip 容器：
.tooltip { position: absolute; contain: paint; overflow: clip; }（配合overflow: clip避免裁剪失效） - ⚠️ 注意：
contain: paint不阻止子元素真实溢出，若依赖overflow: hidden裁剪视觉，需改用overflow: clip或确保溢出可接受
验证是否真生效，别信 getComputedStyle
getComputedStyle(el).contain 返回值只是声明存在，不代表浏览器执行了隔离。真实效果只能靠渲染行为验证：
- 打开 Chrome DevTools → Rendering 面板 → 勾选 “Paint Flashing”
- 在目标组件上操作（如点击按钮、滚动列表、展开折叠项），观察闪光是否严格限制在容器内框中，不外溢到工具栏或页脚
- 若闪光频繁跳出容器，说明 containment 未启动——优先检查容器宽高是否显式、子元素是否含破坏隔离的
position: absolute计算依赖
最易被忽略的是：移动端 Safari 对 size 子项支持极差，strict 几乎无效；而 layout paint 组合在 iOS 16.4+ 和 Android Chrome 115+ 上才稳定可用——兼容性判断必须落到具体机型和系统版本，不能只看规范文档。
