Media query layout changes disrupt keyboard focus

Phenomenon

When a CSS media query is triggered (e.g., rotating a device or shifting container width), browsers often trigger a layout pass that can invalidate the current DOM selection in mobile browsers, leading to the virtual keyboard being dismissed.

Reproduction Steps

1. Open a contenteditable field on a mobile device.
2. Focus the field so the virtual keyboard appears.
3. Rotate the device (Portrait to Landscape).
4. Observe that the keyboard often disappears.

Observed Behavior

The viewport change triggers a reflow that causes the browser to lose the active element focus if the element’s bounding box moves significantly.