contain: paint 单独启用时拦重绘但不拦重排，仅裁剪绘制区域，将元素及其后代绘制限制在自身盒模型边界内，超出部分直接被裁掉不参与光栅化。
contain: paint 单独启用时到底拦不拦重绘？
contain: paint 单独启用，只裁剪绘制区域，不阻止重排，也不影响布局计算。它真正起作用的点只有一个：把元素及其后代的绘制限制在自身盒模型边界内，超出部分（比如下拉菜单阴影、浮动 tooltip、溢出的 SVG）直接被裁掉，不参与当前帧的光栅化。
常见错误现象：overflow: visible 下子元素移出父容器却仍被完整绘制；滚动时整个页面跟着重绘，工具栏图标 hover 动画拖慢帧率。
- 必须配合
overflow: hidden或显式尺寸才看得见裁剪效果（否则浏览器可能按需扩展绘制区） - 不设
width/height也能生效，但若父容器是flex: 1或height: auto，裁剪边界可能不稳定 - 它对
position: fixed或position: absolute子元素依然有效——只要它们的 containing block 是该元素
哪些盒模型加了 contain: paint 真能缩小重绘范围？
重点不是“盒子多复杂”，而是“有没有视觉溢出 + 是否高频更新”。
✅ 有效场景：
-
.dropdown-menu：展开时阴影/箭头常溢出，加contain: paint后滚动文档不再连带重绘整个菜单 -
.toolbar（固定高度）：按钮 hover、图标切换只触发自身重绘，不波及下方编辑区 -
.comment-item（含头像+文字+时间戳）：高亮、折叠动画仅重绘本项，不引发列表整体重排重绘
❌ 白忙一场：
-
body或#app：没有明确边界，裁剪无意义，还可能干扰position: sticky -
div包裹contenteditable且未设尺寸：浏览器静默忽略，或导致光标错位 - 按钮本身（
button或a）：无后代树可隔离，加了等于没加；应包一层div再设
为什么 contain: paint 在移动端和框架里容易失效？
不是写法错，是时机和上下文断了。
- iOS Safari 16.4+ 才稳定支持
paint；旧版（如微信 X5 内核）直接忽略，getComputedStyle(el).contain返回字符串但行为无变化 - Vue/React 中，DOM 插入常由框架控制，等你用 class 或 ref 加上
contain: paint，节点早已插入并触发过首次重绘 - 绝对定位浮层（如 tooltip）若其 containing block 没设
contain: paint，浮层自己加也没用——绘制边界由 containing block 决定
实操建议：
- JS 动态插入前，先设
el.style.contain = 'paint'，再appendChild - 收起动画结束后（如
v-if切换为 false），清空：el.style.contain = ''，避免后续 height 被意外锁死 - 验证是否真生效：打开 Chrome DevTools → Layers 面板，看该元素是否出现独立“Paint”图层，且重绘高亮区域严格限制在其盒内
最麻烦的从来不是怎么写，而是判断这个盒子的视觉边界是否真的稳定——一旦内容撑开、字体加载、图片解码导致尺寸浮动，contain: paint 就从优化变成幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
