contain: layout paint 是 HTML 编辑器中唯一值得落地的组合，须绑定明确尺寸、避开 contenteditable 根节点、仅用于工具栏等非编辑区域，禁用于富文本容器本身。
直接结论：在 HTML 编辑器这类动态、高交互场景中，contain: layout paint 是唯一值得落地的组合，但必须绑定明确尺寸、避开 contenteditable 根节点、且不能加在富文本容器本身上——否则光标错位、样式丢失、滚动卡顿会立刻出现。
为什么不能给 contenteditable 元素加 contain
浏览器对 contenteditable 的渲染逻辑本就特殊：光标定位、选区计算、IME 输入框锚点都强依赖布局树完整性。一旦加了 contain: layout，Chrome 会静默降级或直接破坏选区边界；Safari 更激进，可能让 getSelection().getRangeAt(0) 返回空范围。
- 常见错误现象：输入时光标跳到顶部、回车后段落消失、粘贴富文本后样式全丢
- 真实适用位置是编辑器的「非编辑区域」：工具栏、侧边属性面板、预览卡片、历史操作快照列表
- 若硬要优化内容区，只能套一层 wrapper（如
<div class="editor-content-wrapper"><div contenteditable>...</div></div>），再对 wrapper 加contain: layout paint
contain: layout paint 在编辑器工具栏中的实操写法
工具栏是典型「固定尺寸 + 高频状态更新」区域：按钮 hover、图标切换、下拉菜单展开都会触发重绘。加 contain 后，滚动文档时它不会被连带重绘，GPU 光栅化压力下降明显。
- 必须显式声明尺寸：
height: 48px或min-height: 48px，禁用height: auto - 避免 flex 容器直接加：
display: flex的工具栏父元素若没设宽高，contain会被忽略 - 推荐写法：
.toolbar { contain: layout paint; height: 48px; overflow: hidden; /* 配合 paint，裁掉意外溢出的下拉菜单阴影 */ } - JS 动态控制时，先设
el.style.contain = 'layout paint'，再插入按钮节点；收起折叠菜单后建议清空，避免size意外锁死高度
虚拟滚动富文本列表（如历史版本、协作评论）怎么加 contain
这类列表项是编辑器中最适合加 contain 的地方：每条记录结构固定、高度可控、更新独立，且常伴随动画和高亮。
立即学习“前端免费学习笔记（深入）”；
- 单条记录必须有稳定高度：
height: 64px或min-height: 64px，不能用max-content - 禁止对
display: grid或display: flex的列表容器加contain: layout，它会干扰行高计算——应加在每个.comment-item上 - 若评论含图片或嵌入块，需额外加
overflow: hidden，否则contain: paint不会裁剪其溢出部分 - Safari 下验证是否生效：打开 DevTools → Rendering → 勾选 “Paint Flashing”，滚动时闪光只应在单个评论项内闪动，而非整列
容易被忽略的兼容性与降级处理
编辑器必须跑在各种环境里，contain 不是“写了就稳”。iOS 微信 X5 内核、旧版 Safari、某些 Electron 版本根本不支持 size，而 layout paint 在 Safari 15.4+ 才真正可靠。
- 运行时检测不能只靠
'contain' in document.documentElement.style，还要测行为：const testEl = document.createElement('div'); testEl.style.contain = 'layout paint'; testEl.style.height = '1px'; document.body.appendChild(testEl); const computed = getComputedStyle(testEl).contain; // 若返回 'none'，说明实际未启用 document.body.removeChild(testEl); - 不支持时，降级方案不是“什么都不做”，而是用
will-change: transform+transform: translateZ(0)强制图层提升，至少保绘制隔离 -
contain: strict在编辑器里基本不用——它会让position: absolute的弹出菜单失去定位参考，且 iOS Safari 对size的实现偏差会导致评论项高度塌陷
