Skip to content

[Flutter Web] Widgets not resizing (disappear) with browser zoom in / out #129182

@reza00farjam

Description

@reza00farjam

Is there an existing issue for this?

Steps to reproduce

  1. Open the Flutter web application in a browser.
  2. Zoom in or out using the browser zoom controls.
  3. Observe that some of the widgets become cutoff and disappear from the screen when zoomed too far.

P. S.
This issue was also asked on stackoverflow 4 months ago and got no answer yet.

Expected results

All widgets should remain fully visible and properly resized with the browser zoom, without becoming cutoff or disappearing from the screen.

Actual results

Some of the widgets become cutoff and disappear from the screen.

Code sample

Any flutter web code.

Screenshots or Video

No response

Logs

No logs in terminal when this happen.

Flutter Doctor output

[√] Flutter (Channel stable, 3.10.5, on Microsoft Windows [Version 10.0.22621.1848], locale en-US)
• Flutter version 3.10.5 on channel stable at C:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 796c8ef (7 days ago), 2023-06-13 15:51:02 -0700
• Engine revision 45f6e00911
• Dart version 3.0.5
• DevTools version 2.23.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[X] Android toolchain - develop for Android devices
X Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
flutter config --android-sdk to update to that location.

[√] Chrome - develop for the web
• Chrome at C:\Users\reza\AppData\Local\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.6.3)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.6.33801.468
• Windows 10 SDK version 10.0.22000.0

[!] Android Studio (not installed)
• Android Studio not found; download from https://developer.android.com/studio/index.html
(or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).

[√] VS Code (version 1.79.2)
• VS Code at C:\Users\reza\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.67.20230601

[√] Connected device (3 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22621.1848]
• Chrome (web) • chrome • web-javascript • Google Chrome 114.0.5735.134
• Edge (web) • edge • web-javascript • Microsoft Edge 100.0.1185.36

[√] Network resources
• All expected network resources are available.

! Doctor found issues in 2 categories.

Metadata

Metadata

Assignees

Labels

P1High-priority issues at the top of the work listc: regressionIt was better in the past than it is nowcustomer: crowdAffects or could affect many people, though not necessarily a specific customer.e: web_htmlHTML rendering backend for Webengineflutter/engine related. See also e: labels.found in release: 3.10Found to occur in 3.10found in release: 3.12Found to occur in 3.12has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions