Keyboard covers first question after adding a repeat that will move user out of screen

[WKobus]

Expected Behaviour

Keyboard should not cover first question

Observed Behaviour

Keyboard covers first question after adding a repeat

Reproduction Steps

Steps:

1. Go to https://staging.getodk.cloud/projects/139/forms/audit%20repeat%20required%20const%20track%20changes/submissions
2. Tap on New submission
3. Add new repeat that will move user out of screen

Screenshots or Videos

ScreenRecording_08-26-2026.16-26-41_1.MP4

Environment

Browser version: Chrome 149.0.7827.137, Safari
OS: iOS 26.6
Web Forms version: v1.0.3

[latin-panda]

I just learned that iOS and Android handled keyboards differently. Android would typically fire a window resize event (shrinking the viewport), while iOS would overlay the keyboard on top of the page and visually "push" the content up without resizing the underlying document.

Browsers have no reliable way to tell when the soft keyboard finishes rendering. Chrome has an API (navigator.virtualKeyboard), but it is not always available. Safari and Firefox have nothing. We also try to avoid using the user agent to detect mobile devices. Instead, we usually guess from screen resize events or touch points.

One workaround is to check if the screen is mobile-sized. If it is, we can scroll the question to the top before focusing it. That way, the input stays visible no matter how tall the keyboard is.

This has a few downsides. If a desktop user makes their browser window small, they will get the same big scroll jump even without a keyboard (we tried to avoid in the current version). Also, questions at the very bottom of a form might not always reach the top of the screen. We could add some extra bottom padding on mobile to help with that.

None of this is a bulletproof fix for the soft keyboard issue but it should still help in most cases, though.