Repository navigation
fix(web): sheets and drawers no longer collapse when the page reads as off screen - #920
Merged
Merged
Conversation
…s off screen On an iPhone Duo, going from the open screen to the folded one could leave the thread list and the right panel squeezed to no height: their fixed-size rows stacked with nothing behind them, until the panel was closed and opened again. Sheets, drawers and dialogs pad themselves above an on-screen keyboard by comparing the visual viewport with the window. Feeding a visual viewport of about no height reproduces the reported state exactly: the padding takes the whole window. The best explanation, not measured on the phone, is that iOS reports that for a moment while the page moves between the two screens and sends no resize event when it recovers. - A visual viewport under a tenth of the window's height is not read as a keyboard. - The keyboard readings are taken again on the window's own resize, not only on the visual viewport's events. Also swaps three calc() offsets for a plain offset plus a margin (image viewer arrows, both find bars): same geometry, fewer startup CSS bytes, since main sits about 150 B under the startup size budget.
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
This branch was previously 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.
The problem
On an iPhone Duo (a folding iPhone, here on a developer beta of iOS), going from the open screen to the folded one sometimes left the thread list and the right panel "transparent": their fixed-size rows stacked with nothing behind them and the scrolling part gone. Closing the panel and opening it again cleared it.
The panels were not see-through. They had collapsed to no height. Sheets, drawers and dialogs pad themselves above an on-screen keyboard by comparing the visual viewport with the window. Feeding the app a visual viewport of about no height reproduces both reported screenshots exactly: the padding takes the whole window.
The best explanation, not measured on the phone, is that iOS reports that for a moment while the page moves between the two screens, and sends no resize event when the reading recovers.
The fix
Also swaps three
calc()offsets for a plain offset plus a margin (image viewer arrows, both find bars). Same geometry, fewer startup CSS bytes: main sits about 150 B under the startup size budget, and this change measures about 45 B over main locally. If the size check trips, #916 (the browser panel's code out of web startup, about 22 KB) clears it.Checked
vp fmt,vp lint,vp run typecheckNot checked