Flutter Web - Broken layout after 2.8.0

[caduandrade]

After upgrade to 2.8.0, all my apps got broken layout in web.

I just created a new app with "flutter create teste" and already is broken if move the cursor over the floating button.

[  +84 ms] executing: uname -m
[  +41 ms] Exit code 0 from: uname -m
[        ] x86_64
[   +8 ms] executing: [/cadu/desenv/flutter/] git -c log.showSignature=false log -n 1 --pretty=format:%H
[   +8 ms] Exit code 0 from: git -c log.showSignature=false log -n 1 --pretty=format:%H
[        ] cf4400006550b70f28e4b4af815151d1e74846c6
[        ] executing: [/cadu/desenv/flutter/] git tag --points-at cf4400006550b70f28e4b4af815151d1e74846c6
[  +16 ms] Exit code 0 from: git tag --points-at cf4400006550b70f28e4b4af815151d1e74846c6
[        ] 2.8.0
[  +14 ms] executing: [/cadu/desenv/flutter/] git rev-parse --abbrev-ref --symbolic @{u}
[   +7 ms] Exit code 0 from: git rev-parse --abbrev-ref --symbolic @{u}
[        ] origin/stable
[        ] executing: [/cadu/desenv/flutter/] git ls-remote --get-url origin
[   +7 ms] Exit code 0 from: git ls-remote --get-url origin
[        ] https://github.com/flutter/flutter.git
[ +101 ms] executing: [/cadu/desenv/flutter/] git rev-parse --abbrev-ref HEAD
[   +9 ms] Exit code 0 from: git rev-parse --abbrev-ref HEAD
[        ] stable
[  +67 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterWebSdk' is not required, skipping update.
[   +3 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'WindowsUwpEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[  +71 ms] executing: /home/cadu/Android/Sdk/platform-tools/adb devices -l
[  +46 ms] List of devices attached
[   +5 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'WindowsUwpEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[  +89 ms] Skipping pub get: version match.
[ +140 ms] Generating /cadu/teste/android/app/src/main/java/io/flutter/plugins/GeneratedPluginRegistrant.java
[ +154 ms] Launching lib/main.dart on Chrome in debug mode...
[ +153 ms] Updating assets
[  +91 ms] Waiting for connection from debug service on Chrome...
[  +83 ms] <- reset
[   +9 ms] /cadu/desenv/flutter/bin/cache/dart-sdk/bin/dart --disable-dart-dev /cadu/desenv/flutter/bin/cache/artifacts/engine/linux-x64/frontend_server.dart.snapshot --sdk-root
/cadu/desenv/flutter/bin/cache/flutter_web_sdk/ --incremental --target=dartdevc --debugger-module-names --experimental-emit-debug-metadata -DFLUTTER_WEB_AUTO_DETECT=true --output-dill
/tmp/flutter_tools.DUGOPH/flutter_tool.JVXRUD/app.dill --libraries-spec file:///cadu/desenv/flutter/bin/cache/flutter_web_sdk/libraries.json --packages /cadu/teste/.dart_tool/package_config.json
-Ddart.vm.profile=false -Ddart.vm.product=false --enable-asserts --track-widget-creation --filesystem-root /tmp/flutter_tools.DUGOPH/flutter_tools.UGGZQB --filesystem-scheme org-dartlang-app
--initialize-from-dill build/b1b715402d823b7fd5c2b68d2edcb2ce.cache.dill.track.dill --platform file:///cadu/desenv/flutter/bin/cache/flutter_web_sdk/kernel/flutter_ddc_sdk_sound.dill --sound-null-safety
[  +14 ms] <- compile org-dartlang-app:/web_entrypoint.dart
[+21864 ms] Waiting for connection from debug service on Chrome... (completed in 22.0s)
[        ] Synced 28.4MB.
[        ] <- accept
[        ] Caching compiled dill
[  +53 ms] Using Google Chrome 96.0.4664.93 

[   +3 ms] executing: uname -m
[   +8 ms] Exit code 0 from: uname -m
[        ] x86_64
[ +578 ms] [CHROME]:
[   +1 ms] [CHROME]:DevTools listening on ws://127.0.0.1:36847/devtools/browser/a6dc0aec-52e2-4837-a6e8-47e771086480
[ +326 ms] DwdsInjector: Received request for entrypoint at http://localhost:37455/main_module.bootstrap.js
[   +6 ms] MetadataProvider: Loading debug metadata...
[  +17 ms] MetadataProvider: Loaded debug metadata (sound null safety)
[  +10 ms] DwdsInjector: Injected debugging metadata for entrypoint at http://localhost:37455/main_module.bootstrap.js
[+3372 ms] ChromeProxyService: Initializing expression compiler for main_module.bootstrap.js with sound null safety: true
[ +115 ms] DevHandler: Debug service listening on ws://127.0.0.1:35807/39n4qr_SMKw=/ws

[  +28 ms] This app is linked to the debug service: ws://127.0.0.1:35807/39n4qr_SMKw=/ws
[  +10 ms] Debug service listening on ws://127.0.0.1:35807/39n4qr_SMKw=/ws
[        ] 💪 Running with sound null safety 💪
[   +3 ms] 🔥  To hot restart changes while running, press "r" or "R".
[        ] For a more detailed help message, press "h". To quit, press "q".
[        ] An Observatory debugger and profiler on Chrome is available at: http://127.0.0.1:35807/39n4qr_SMKw=
[+1275 ms] The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:35807/39n4qr_SMKw=
[+17860 ms] WARNING: failed to attach a stencil buffer. Rendering will be skipped.
[  +39 ms] WARNING: Falling back to CPU-only rendering. Failed to initialize WebGL context.

Analyzing teste...                                                      
No issues found! (ran in 1.6s)

[✓] Flutter (Channel stable, 2.8.0, on Ubuntu 20.04.3 LTS 5.11.0-41-generic, locale en_US.UTF-8)
    • Flutter version 2.8.0 at /cadu/desenv/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision cf44000065 (4 days ago), 2021-12-08 14:06:50 -0800
    • Engine revision 40a99c5951
    • Dart version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /home/cadu/Android/Sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_SDK_ROOT = /home/cadu/Android/Sdk
    • Java binary at: /cadu/desenv/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /cadu/desenv/android-studio
    • Flutter plugin version 63.0.1
    • Dart plugin version 203.8452
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[✓] IntelliJ IDEA Community Edition (version 2021.2)
    • IntelliJ at /cadu/desenv/idea-IC-211.7628.21
    • Flutter plugin version 62.0.3
    • Dart plugin version 212.5632

[✓] VS Code (version 1.63.0)
    • VS Code at /usr/share/code
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 96.0.4664.93

• No issues found!

[caduandrade]

The logical button position is still at the bottom

[bharath-instrive]

I also had same issue with canvaskit rederer, though html render works fine in zoom it lacks quality

[darshankawar]

@caduandrade
Thanks for the report. I tried a new Flutter web app and didn't observe the behavior you mentioned above. I see no warnings on the browser console, as below and the layout seems to be proper:

Are there any specific steps to replicate the broken layout behavior ? I tried on mac and ran using canvaskit.

stable flutter doctor -v

[✓] Flutter (Channel stable, 2.8.0, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-GB)
    • Flutter version 2.8.0 at /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision cf44000065 (10 hours ago), 2021-12-08 14:06:50 -0800
    • Engine revision 40a99c5951
    • Dart version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 30)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/dhs/Library/Android/sdk
    • Java binary at: /Users/dhs/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.    

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/dhs/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/202.7486908/Android
      Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)        

[✓] VS Code (version 1.57.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (4 available)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 93.0.4577.82

[caduandrade]

Hi @darshankawar !

Did you move the cursor over the float button "+"?

I just don't get an error if I run it with HTML renderer (flutter run -d chrome --web-renderer HTML)

[darshankawar]

@caduandrade
Yes, I tried by moving cursor over FAB button. Please see below:

95127.mov

[caduandrade]

Any idea what could be different? @bharath-instrive and I have the same problem using canvaskit.
I'm using Linux (Kubuntu)

[maheshj01]

Hi @caduandrade, I did verify this on Ubuntu 20.04.3 LTS 5.11.0-41-generic did not see any issues neither on stable 2.8.0 or master 2.9 I tried clicking on the fab and even resizing the window and did not see any issue.

flutter doctor -v

mahesh@mahesh:~/Desktop/counter$ flutter doctor -v
[✓] Flutter (Channel stable, 2.8.0, on Ubuntu 20.04.3 LTS 5.11.0-41-generic, locale
    en_GB.UTF-8)
    • Flutter version 2.8.0 at /home/mahesh/Development/stable
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision cf44000065 (6 days ago), 2021-12-08 14:06:50 -0800
    • Engine revision 40a99c5951
    • Dart version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /home/mahesh/Android/Sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at:
      /home/mahesh/Downloads/android-studio-2020.3.1.25-linux/android-studio/jre/bin/j
      ava
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • clang version 10.0.0-4ubuntu1
    • cmake version 3.16.3
    • ninja version 1.10.0
    • pkg-config version 0.29.1

[✓] Android Studio (version 2020.3)
    • Android Studio at
      /home/mahesh/Downloads/android-studio-2020.3.1.25-linux/android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[✓] VS Code (version 1.62.3)
    • VS Code at /usr/share/code
    • Flutter extension version 3.29.0

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Ubuntu 20.04.3 LTS 5.11.0-41-generic
    • Chrome (web)    • chrome • web-javascript • Google Chrome 96.0.4664.93

• No issues found!

[✓] Flutter (Channel master, 2.9.0-1.0.pre.94, on Ubuntu 20.04.3 LTS
    5.11.0-41-generic, locale en_GB.UTF-8)
    • Flutter version 2.9.0-1.0.pre.94 at /home/mahesh/Development/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 22bd7246c3 (5 minutes ago), 2021-12-15 01:49:05 -0500
    • Engine revision 57f7719e6e
    • Dart version 2.16.0 (build 2.16.0-109.0.dev)
    • DevTools version 2.9.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /home/mahesh/Android/Sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at:
      /home/mahesh/Downloads/android-studio-2020.3.1.25-linux/android-studio/jre/bin/j
      ava
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • clang version 10.0.0-4ubuntu1
    • cmake version 3.16.3
    • ninja version 1.10.0
    • pkg-config version 0.29.1

[✓] Android Studio (version 2020.3)
    • Android Studio at
      /home/mahesh/Downloads/android-studio-2020.3.1.25-linux/android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[✓] VS Code (version 1.62.3)
    • VS Code at /usr/share/code
    • Flutter extension version 3.29.0

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Ubuntu 20.04.3 LTS 5.11.0-41-generic
    • Chrome (web)    • chrome • web-javascript • Google Chrome 96.0.4664.93

• No issues found!

[bharath-instrive]

@darshankawar

• Visit Flutter dashboard (i used chrome in mac)
• Zoom in multiple time
• Zoom out / reset zoom to 100%
  now you may encounter the issue stated by @caduandrade

Untitled3.mov

Few more live sites found using Its All Widgtes

• Brethap
• Flutter Gradient Generator

note: Zoom in must be multiple level

[maheshj01]

If the layout is broken on zooming the window then it is very likely a duplicate of #77084,