The app fills the visible viewport, not the layout one - #330
Merged
Conversation
On a phone the navigation bar floated above a band of background with the composer pushed toward the browser chrome. The dynamic-viewport fix was on .app alone, while html, body and #root were still 100% of the layout viewport, which on iOS is taller than what is visible: the app sat in a box bigger than the screen and the page itself scrolled. Every ancestor now uses the visible viewport and refuses a page-level scroll, so the bar stays on the bottom edge and the views scroll inside their own containers. The bar also clears the home indicator, which needs viewport-fit=cover for the inset to report a real value.
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
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.
On a phone the navigation bar floated above a band of background and the composer sat near the browser chrome. The dynamic-viewport fix was applied to
.appalone, whilehtml, body, #rootwere stillheight: 100%of the layout viewport, which on iOS is taller than the visible one: the app was laid out in a box bigger than the screen and the page itself scrolled.Under the existing 760px breakpoint, every ancestor now uses
100dvhwithoverflow: hidden, so there is no page-level scroll and the bottom bar stays on the bottom edge; views scroll inside their own containers as before. The bar also getspadding-bottom: max(2px, env(safe-area-inset-bottom))to clear the home indicator, which requiresviewport-fit=coveron the viewport meta for the inset to report a real value. Browsers withoutdvhignore the declarations and keep today's behavior. CSS and one meta tag.