Repository navigation
Fix the web loading screen being laid out at desktop width on mobile - #6943
Open
ndonkoHenri wants to merge 2 commits into
Open
ndonkoHenri wants to merge 2 commits into
ndonkoHenri wants to merge 2 commits into
Conversation
client/web/index.html had no viewport meta, so until the engine added its own, a mobile browser laid the loading screen out at 980 px; after a reload at the engine's 1.0 zoom the centred logo landed outside the visible area. Add the same viewport tag the engine and the flet build web template use.
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Deploying flet-website-v2 with
|
| Latest commit: |
0bce26c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://61954f17.flet-website-v2.pages.dev |
| Branch Preview URL: | https://fix-web-boot-viewport-6051.flet-website-v2.pages.dev |
1 task done
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.
Fixes #6051
The bug
In a mobile browser, reloading a Flet web app shows the loading logo off-center or not at all until the app starts.
The loading screen is plain HTML in
client/web/index.html: a full-screen flex box (position: fixed; inset: 0) that centres the logo. That page has no<meta name="viewport">, so a mobile browser lays it out as a 980 CSS px desktop page. The Flutter engine adds its own viewport tag only when it starts. The order of events is:This affects everything served by the prebuilt web client:
flet run --web,ft.run(view=ft.AppView.WEB_BROWSER), FastAPI hosting andflet publish. Apps built withflet build webare not affected, because the build template'sindex.htmlalready has the tag.The fix
Add the same viewport tag that the
flet build webtemplate and the Flutter engine use:The loading screen is now laid out at device width from the first byte. Once the engine starts, it replaces the tag with its own identical one, so the app behaves exactly as before. Flutter's warning about an existing viewport tag sits in an
assert, so it fires only in debug builds.Testing
Chrome on an Android 14 emulator (412 dp wide). The page was served the way
flet run --webserves it, andflutter_bootstrap.jswas held back so the loading screen could be measured. I ran it twice and got the same results.Top row is the current client, bottom row the fix:
Summary by Sourcery
Ensure prebuilt Flet web apps render their loading screen correctly on mobile browsers from the initial page load.
Bug Fixes:
Chores: