viewport and focus on mobile webkit
viewport and focus on mobile webkit
the iOS keyboard shrinks the visual viewport, not the layout viewport, so height media queries and vh units do not change when it opens. size editors, account switchers and suggestion lists from window.visualViewport, and when a short screen hides a grid row, update the grid's row template too or the track stays reserved.
focus
safari does not focus a button when it is clicked, so document.activeElement is not the invoking control when a dialog opens from it. store the invoker explicitly and restore focus to it on close.
repeated taps
double-tap zoom delays and swallows quick repeated taps. scope touch-action: manipulation to the controls that need repeated taps rather than disabling zoom for the page.
what to check
- geometry is not behaviour: a map can fit the viewport while its touch handler blocks page swipes.
- a sticky element can stay visible while covering every control under it; hit-test at intermediate scroll positions, not only at rest.
- test direct links against the deployed host's SPA fallback; a dev server already rewrites unknown paths.
- webkit automation is evidence, not a physical-device test.
sources
- Character
web/edit.ts,web/imagine.tsandscripts/edit-check.ts(visual-viewport sizing),docs/verification.md(dialog focus restoration), 2026-09-19 to 2026-09-21. - MDN touch-action; MDN button: clicking and focus; MDN VisualViewport.
Did you enjoy this article?
Recommend it — Standard Reader surfaces well-loved writing to more readers across the network.