Case ce-0080 · Scenario scenario-mutation-observer-interference

MutationObserver may interfere with contenteditable editing

OS: macOS 14.0 Device: Desktop or Laptop MacBook Pro Browser: Safari 17.0 Keyboard: US Status: draft
mutation-observer performance editing safari macos

Phenomenon

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.

Reproduction example

  1. Create a contenteditable div.
  2. Attach a MutationObserver that logs all mutations.
  3. Type text rapidly in the contenteditable.
  4. Observe performance and any lag.
  5. Compare with typing without the observer.

Observed behavior

  • In Safari on macOS, MutationObserver callbacks can cause performance issues.
  • Rapid typing may trigger many mutations and callbacks.
  • The UI may lag or become unresponsive.
  • Performance degrades with complex observer logic.

Expected behavior

  • MutationObserver should not significantly impact editing performance.
  • Or, there should be a way to batch mutations.
  • Callbacks should be optimized for contenteditable use cases.

Playground for this case

Use the reported environment as a reference and record what happens in your environment while interacting with the editable area.

Reported environment
OS: macOS 14.0
Device: Desktop or Laptop MacBook Pro
Browser: Safari 17.0
Keyboard: US
Your environment

Use this editable area to reproduce the described case.

Event log
Use this log together with the case description when filing or updating an issue.
0 events
Interact with the editable area to see events here.