必须将 contain: layout paint 加在按钮容器上而非按钮本身，容器需设显式尺寸并加 position: relative，且须运行时检测浏览器支持性，否则隔离无效。
contain: paint 必须加在按钮容器上，不是按钮本身
直接给 <button></button> 元素加 contain: paint 没用——按钮自身尺寸小、无内部重绘区域，浏览器根本不会触发绘制隔离。真正要隔离的是按钮状态变化（如 hover 动画、loading 转圈、图标切换）所引发的局部重绘扩散。
正确做法是把按钮包进一个有明确边界的容器，并对这个容器启用 contain：
- 容器需设显式尺寸或最小尺寸：
min-height: 44px、width: 120px或aspect-ratio: 1 - 避免用
height: auto、flex: 1、width: fit-content（Safari 不稳定） - 若按钮是 flex 子项，父级 flex 容器不能“代为提供尺寸”，容器自身必须满足尺寸约束
示例结构：
<div class="btn-wrapper" style="min-height: 44px; width: 120px; contain: paint;"> <button>提交</button> </div>
为什么 layout + paint 必须一起用，单用 paint 不够
只写 contain: paint 时，按钮 hover 改背景色、加阴影确实能限制重绘范围，但一旦按钮文字换行、图标尺寸变化、或 JS 动态插入 loading spinner，容器高度就会撑开——这会触发外部布局重排（Layout Shift），兄弟元素跳动，滚动条抖动。
真正稳的组合是 contain: layout paint，二者缺一不可：
-
layout锁定容器尺寸边界，阻止内容变化影响外部布局 -
paint限制绘制扩散，让 hover、transition、opacity 变化只在容器内生效 - 单独用
contain: content已被 Chrome 120+ 移除，MDN 明确不推荐
错误写法：contain: paint 或 contain: layout；正确写法：contain: layout paint。
绝对定位加载图标会逃逸 containment 边界
很多高性能按钮会在点击后显示绝对定位的 loading spinner（如 position: absolute; top: 50%; left: 50%）。但 contain: paint 不会自动把定位上下文拉进容器——如果容器没设 position: relative，spinner 就会以 为基准定位，直接突破容器边界，导致隔离失效、Paint Flashing 扩散到全屏。
必须同步补上定位上下文：
- 给容器加
position: relative - 确保所有
position: absolute子元素（包括伪元素、SVG、icon）都在该容器内完成定位 - 避免在按钮内部用
transform: translate()模拟位移——它不改变定位上下文，仍可能逃逸
漏掉这一条，DevTools 里看到 contain 声明生效，实际滚动或交互时 Paint Flashing 区域却没收缩。
移动端按钮要避开 X5 内核和 iOS Safari 16.4 以下版本
微信内置浏览器（X5 内核）基本不支持 contain，iOS Safari 在 16.4 之前也不支持 contain: paint。盲目加上去不仅无效，还可能因尺寸锁定逻辑干扰按钮点击热区或 focus outline 渲染。
生产环境必须做运行时检测：
if ('contain' in document.documentElement.style) {
btnWrapper.style.contain = 'layout paint';
}
更稳妥的做法是：只在现代 Chromium 和 Safari 16.4+ 环境中启用，其余降级为传统优化（如用 will-change: transform + transform: translateZ(0)）。
真正难的不是加那行 CSS，而是判断“这个按钮容器是否真能被切出去”——尺寸不可控、定位上下文缺失、内核不支持，三者任一成立，contain 就只是个装饰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
