MutationObserver may interfere with contenteditable editing
OS: macOS 14.0 · Device: Desktop or Laptop MacBook Pro · Browser: Safari 17.0 · Keyboard: US
Open case →Scenario
When a MutationObserver is attached to a contenteditable element or its parent, the observer callbacks may interfere with editing performance. Frequent DOM mutations during typing can trigger many observer callbacks, causing lag or jank.
When a MutationObserver is attached to a contenteditable element or its parent, the observer callbacks may interfere with editing performance. Frequent DOM mutations during typing can trigger many observer callbacks, causing lag or jank.
Visual view of how this scenario connects to its concrete cases and environments. Nodes can be dragged and clicked.
Each row is a concrete case for this scenario, with a dedicated document and playground.
| Case | OS | Device | Browser | Keyboard | Status |
|---|---|---|---|---|---|
| ce-0080-contenteditable-with-mutation-observer | macOS 14.0 | Desktop or Laptop MacBook Pro | Safari 17.0 | US | draft |
Open a case to see the detailed description and its dedicated playground.
OS: macOS 14.0 · Device: Desktop or Laptop MacBook Pro · Browser: Safari 17.0 · Keyboard: US
Open case →Other scenarios that share similar tags or category.
When a contenteditable element has CSS filters applied (blur, brightness, etc.), editing performance may be degraded. Typing may lag, and selection may be slow to update.
When a contenteditable element has CSS will-change property set, performance may be affected. In some cases, it may improve performance by hinting the browser about upcoming changes. In other cases, it may degrade performance by creating unnecessary layers.
When a contenteditable element is used with virtual scrolling libraries (e.g., for large documents), the virtual scrolling mechanism may interfere with text selection and caret positioning. The selection may be lost when elements are removed from the DOM during scrolling.
Browsers try to keep the caret visible by scrolling the editable container or the page. During rapid typing—especially near the bottom or right edge—scroll updates can lag, batch, or feel jarring, so the caret temporarily leaves the viewport or the view jumps unexpectedly.
A known Chromium regression around spellcheck and large contenteditable regions caused severe typing lag—documented for planning workarounds such as spellcheck=false or chunking.
Have questions, suggestions, or want to share your experience? Join the discussion below.