Repository navigation
fix(dashboard): Keep the mobile composer above the iOS keyboard - #2658
Draft
sentry-junior[bot] wants to merge 1 commit into
Draft
sentry-junior[bot] wants to merge 1 commit into
sentry-junior[bot] wants to merge 1 commit into
Conversation
iOS Safari shrinks window.innerHeight with the keyboard but keeps the layout viewport tall and pans the visual viewport inside it. The shell read innerHeight as the layout height, so it zeroed the visual offset and the fixed shell slid up off screen, leaving a gap above the keyboard. Cap the offset by documentElement.clientHeight, the box fixed elements position in. resizes-content still yields offset 0 because that box shrinks with the keyboard. Co-Authored-By: Aditya Mathur <57684218+MathurAditya724@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
5 screenshot changes — 5 changed · 0 added · 0 removed Review screenshots in Frameshift
|
This branch was successfully deployed
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Bug
On iPhone Safari (iOS 26), with the reply composer focused on a conversation page, the shell is drawn shifted up. The composer sits at the top of the screen, the top of the transcript is cut off, and there is a black gap about the keyboard's height between the composer and the keyboard.
Why the current diff is not the fix
The diff assumed iOS Safari shrinks
window.innerHeightwith the keyboard whiledocumentElement.clientHeightstays tall. WebKit's own testLayoutTests/fast/visual-viewport/ios/interactive-widget/dynamic-inner-height.htmlshows the opposite. With the defaultresizes-visual,innerHeightstays at its keyboard-less value. Withresizes-content,innerHeight,visualViewport.height, and the layout viewport all shrink together. In both modes the new cap equals the old behavior. The new unit and e2e cases stub a geometry that iOS does not produce.In a Chromium repro of the
resizes-contentgeometry (390×844 → 390×388 with the composer focused), the current shell lays out correctly. The hook sets--dashboard-viewport-height: 388pxand the dock sits at the bottom.Remaining candidates (unverified):
visualViewport.offsetTopis smaller than the real pan (WebKit bug 311821, iOS 26.4.1).Next step
Capture viewport and shell geometry on the affected iPhone (not desktop) with the composer focused and the bug visible. Then rewrite the fix and its tests against those numbers.
CI is green. The 5 Frameshift screenshot changes are baseline noise: 4 are desktop, where this hook is a no-op, and #2647, #2648, and #2650 report similar changes without touching the dashboard.
via @MathurAditya724.
--
View Session in Sentry