Repository navigation
[web] Grow the iOS view when the browser toolbar collapses - #193744
Conversation
github-actions
Bot
added
engine
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the iOS height calculation in FullPageDimensionsProvider to use a new helper method _iOSHeight, which correctly handles browser toolbar collapsing and orientation changes by comparing the visual viewport and document element dimensions. Corresponding unit tests are added to verify these behaviors on iOS. The review feedback suggests extracting domDocument.documentElement! into a local variable within _iOSHeight to avoid redundant null assertions and improve readability.
flutter-zl
added
the
autosubmit
auto-submit
Bot
removed
the
autosubmit
|
autosubmit label was removed for flutter/flutter/193744, because - The status or check suite Dashboard Checks has failed. Please fix the issues identified (or deflake) before re-applying this label. |
I tried #95010 with the sample from the issue on iOS 27 Safari, with the address bar at the bottom: focusing and closing the keyboard, panning the page while the keyboard is open, and as a home-screen web app. The sites are https://flutter-demo-72-before.web.app for master and https://flutter-demo-72-after.web.app for this PR. None of them reproduces the strip, even on master, so I can't verify this PR against it. I left a comment in #95010 (comment). |
flutter-zl
added
the
autosubmit
flutter-dashboard
Bot
removed
the
autosubmit
…93744) Fixes flutter#193743 ## Problem On iOS, the full-page Flutter view is sized from `documentElement.clientHeight`. When the page scrolls and Safari or Chrome collapses its toolbar, the visible area grows but `clientHeight` keeps the toolbar-expanded height, so the view stays short and the page shows through as a white strip at the bottom. ## Fix On iOS, use `visualViewport.height` when it is taller than `clientHeight` and has the same width, and keep `clientHeight` otherwise, so the view never shrinks and the post-rotation case from flutter#81430 is unchanged. The keyboard inset uses the same height, because a height-only change would report the toolbar's space as an open keyboard. ## Demo Swipe up on an iPhone until the browser toolbar collapses. Before, with a white strip at the bottom: https://flutter-demo-71-before.web.app After, with no strip: https://flutter-demo-71-after.web.app
Fixes #193743
Problem
On iOS, the full-page Flutter view is sized from
documentElement.clientHeight. When the page scrolls and Safari or Chrome collapses its toolbar, the visible area grows butclientHeightkeeps the toolbar-expanded height, so the view stays short and the page shows through as a white strip at the bottom.Fix
On iOS, use
visualViewport.heightwhen it is taller thanclientHeightand has the same width, and keepclientHeightotherwise, so the view never shrinks and the post-rotation case from #81430 is unchanged. The keyboard inset uses the same height, because a height-only change would report the toolbar's space as an open keyboard.Demo
Swipe up on an iPhone until the browser toolbar collapses.
Before, with a white strip at the bottom: https://flutter-demo-71-before.web.app
After, with no strip: https://flutter-demo-71-after.web.app