Phenomenon
When a ResizeObserver is attached to a contenteditable element, the observer may trigger during editing as content changes size. This can cause layout recalculations and visual jumps, especially when the contenteditable has dynamic height.
Reproduction example
- Create a contenteditable div with auto height.
- Attach a ResizeObserver to monitor size changes.
- Type text that causes the contenteditable to grow.
- Observe any layout shifts or visual jumps.
- Check if the observer callbacks affect editing performance.
Observed behavior
- In Chrome on Windows, ResizeObserver may trigger frequently during editing.
- Layout recalculations can cause visual jumps.
- The caret position may shift unexpectedly.
- Performance may be affected by frequent resize events.
Expected behavior
- ResizeObserver should not cause layout shifts during editing.
- Or, resize events should be debounced or batched.
- Caret position should remain stable during resize.