🤖 fix: reset viewport scroll on iOS keyboard dismiss #1865
+57
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
On iOS Safari, when the virtual keyboard opens and closes, the visual viewport can remain scrolled even after the keyboard dismisses. This leaves fixed-position elements (like the mobile header) appearing offset from their intended position, making the hamburger menu unclickable. Add useMobileKeyboardFix hook that listens for visualViewport resize events and resets window.scrollTo(0, 0) when the viewport height increases (indicating keyboard closure). The hook is only active on mobile touch devices where this bug occurs.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
On iOS Safari mobile PWA, when clicking an input and then unfocusing it, the header becomes offset upwards making the hamburger menu button unclickable. This PR fixes the issue by resetting the window scroll position when the virtual keyboard closes.
Background
iOS Safari has a known quirk where the visual viewport can remain scrolled after the virtual keyboard dismisses. When using
position: fixedelements (like our mobile header withmobile-sticky-headerclass), they position relative to the layout viewport, not the visual viewport. If the page remains "scrolled" after keyboard dismissal, fixed elements appear shifted.The
interactive-widget=resizes-contentviewport meta tag helps but doesn't fully resolve this in all scenarios.Implementation
Added
useMobileKeyboardFixhook that:visualViewportresize events (fires when keyboard opens/closes)window.scrollTo(0, 0)max-width: 768px+pointer: coarse)The hook is called from
AppInnerto ensure it's active globally.Validation
Generated with
mux• Model:anthropic:claude-opus-4-5• Thinking:high• Cost:$0