contain: layout paint 必须配合显式高度（如min-height/max-height）才生效，否则chrome和safari会静默忽略；二者必须共存，且需作用于父容器而非contenteditable元素本身。
contain: layout paint 必须配显式高度，否则浏览器直接忽略
写了 contain: layout paint 却没效果？大概率是容器没设 min-height 或 max-height。Chrome 和 Safari 会静默跳过该声明——不是 bug，是规范强制要求：隔离需要可预测的边界。
- ❌ 失效写法：
.editor { contain: layout paint; }（无高度约束，height: auto或min-height: min-content都不行） - ✅ 推荐组合：
.editor { contain: layout paint; min-height: 300px; max-height: 600px; overflow-y: auto; } - ⚠️ 别给
contenteditable元素本身加contain—— 它是行盒起点，加了反而破坏布局计算；隔离必须落在其父 wrapper 上
单用 layout 或 paint 都不行，二者必须共存
光标闪烁、语法高亮切换、折叠展开这些操作，本质是两类变化混在一起：视觉更新（需 paint）和 DOM 结构变动（需 layout）。只开一个，另一半照样外溢。
- 只加
paint：新插入的<mark></mark>或行内装饰节点撑开行高，触发整个容器重排，工具栏跟着抖 - 只加
layout：背景色、字体粗细、透明度变化仍会触发样式重算，波及相邻 DOM 节点 - ✅
layout paint组合：layout锁住行盒尺寸传播，paint确保颜色/透明度变更只重绘视口内可见块
哪些子元素会悄悄绕过 containment 边界
编辑器、预览区、列表里嵌的动态组件，可能让浏览器被迫扩大重绘范围，哪怕你已正确设置 contain。
-
position: absolute的提示框（如参数补全）：若top/left依赖外部scrollY，layout隔离会切断该依赖，定位偏移 → 改用getBoundingClientRect()或position: fixed -
position: fixed的遮罩层：本身不受contain影响，但若其父级误加contain: strict，Safari 可能错判合成层层级 - 内联
<svg></svg>或<canvas></canvas>：不响应contain: paint裁剪，需确保宽高固定，否则仍触发外部重排
验证是否真生效，别信 getComputedStyle(el).contain
控制台里能看到值，不代表浏览器执行了隔离。真实效果只能靠渲染行为验证。
- 打开 Chrome DevTools → Rendering 面板 → 勾选 “Paint Flashing”：滚动或触发高亮更新时，闪光必须严格限制在容器内框中，不外溢到工具栏或页脚
- 同时勾选 “Layout Shift Regions”：折叠/展开时，红框应只出现在目标区域，而非整页跳动
- 移动端 iOS Safari 16.4+ 才稳定支持
paint，低于此版本静默忽略；Android Chrome 需开启chrome://flags/#enable-experimental-web-platform-features
contain，而在你是否检查过：父容器是否用 flex/grid 替代了深层嵌套？是否在 will-change 前先设好 contain？以及，min-height/max-height 这些尺寸约束有没有被 JS 动态覆盖？漏掉任何一个，contain 就只是个无效声明。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
