Phenomenon
When a page with a contenteditable element responds to media query changes (e.g., orientation change, window resize), the layout changes may disrupt editing. The caret position may jump, and selection may be lost.
Reproduction example
- Create a contenteditable div on a responsive page.
- Start editing with text selected.
- Rotate the device or resize the window to trigger media query changes.
- Observe whether editing continues smoothly.
- Check if caret position and selection are maintained.
Observed behavior
- In Safari on iOS, layout changes may disrupt editing.
- Caret position may jump during layout recalculation.
- Selection may be lost.
- The virtual keyboard may close unexpectedly.
Expected behavior
- Layout changes should not disrupt editing.
- Caret position should be preserved.
- Selection should be maintained.
- Editing should continue seamlessly.