-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Flutter Web: ListView lags a lot on mobile browsers, inconsistent performance on different devices on different browsers #59332
Comments
Update: The issue remains for other devices, but it's much better: |
Hi @Auties00 Sample you provided depends on packages, please isoalte listview lag code sample |
Any and all widgets will produce the same result. It's as simple as creating a new flutter project, setting as the body of a scaffold a LIstView and inserting some containers as children |
Hi @Auties00 https://elastic-leakey-a57280.netlify.app/#/ Code Sample
flutter doctor -v
|
Just tried it on chrome mobile and it works perfectly, on Firefox mobile it's very laggy. Also I was able to fix the issue on Chrome and Safari, now the scrolling is really smooth but on on Firefox Mobile every flutter site still lags and on Pixel devices you have to hold the screen to scroll |
So this got stranger. On my huawei p30 lite the website works perfectly on chrome, but not on firefox. On the Pixel 3, it performs better on firefox and on chrome scrolling is bugged. How is this even possible? |
So what now? |
What's the performance like if you remove the platform view (e.g. replace it with an image)? Curious if that's the root cause. |
Same thing |
It looks like SKIA is the fix to this issue, enabling it fixed the issue, But for some reason I can't scroll on some devices when Skia is enabled |
I cannot reproduce this issue on my iOS device (12 Pro Max), with Chrome, Firefox or Safari. @Auties00 can you confirm on this? |
Still a problem in ListView.builder when
Tested in real device Samsung S9+ SM-G965F, One UI v2.5, Android 10, Chrome version 112.0.5615.136 Flutter version |
It's still an issue on mobile. I found that attaching an HTML scrollable div to the Flutter Scrollable fixes the issue on firefox. On chrome I couldn't reproduce the issue, but it could be because my phone is a OnePlus 8T which is still a modern phone. I don't have the technical insight to know, but I don't think this issue can be solved on older devices without using the browser's default scroll behaviour instead of the transformation system that flutter uses on the canvas. |
This keeps happening even on the material demo 3 online. Here my videos: flutter/samples#2009 |
I also experience this and another user that I know also has that problem at his project. If I open his web app from a mobile browser on my pixel 5, then scrolling is extremely laggy: |
Same issue in my portfolio website ,sometime the scroll is lagging in chrome in mobile device. But is laptop it works totally fine. |
I actually figured out how to solve it: |
I'm interested in trying your solution, but I've encountered an issue. When I attempt to force Flutter to use the canvaskit web-renderer for building a web app, I encounter errors with some Network images that don't occur when using the html web-renderer. Could you please provide guidance on how to address this issue? |
@Ultranmus |
@AleXoTroN |
Seems this issue has still not been fixed. I'm looking forward to a fix. In the meantime, can anyone help out with a workaround, my portfolio site is built with flutter web and scrolling lags on chrome browser with Samsung Galaxy A35 |
I actually solved it by forcing flutter to use canvaskit. Now I have 60-90fps. |
@AleXoTroN |
Thank you for this. Kindly guide me on how to do this exactly. thanks |
Still issue for 4 years 😞 |
I can relate ... Still the same issue. |
It's gone for me since 2 years |
Here is the solution: |
I can reproduce this issue on Firefox browser (on both Android and macOS desktop) using the given sample code. The issue seems to appear on Flutter flutter doctor -v (stable and master)[✓] Flutter (Channel stable, 3.19.5, on macOS 14.1 23B74 darwin-x64, locale en-VN)
• Flutter version 3.19.5 on channel stable at /Users/huynq/Documents/GitHub/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 300451adae (8 days ago), 2024-03-27 21:54:07 -0500
• Engine revision e76c956498
• Dart version 3.3.3
• DevTools version 2.31.1
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/huynq/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• ANDROID_HOME = /Users/huynq/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15C500b
• CocoaPods version 1.15.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2023.2)
• Android Studio at /Applications/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
• android-studio-dir = /Applications/Android Studio.app/
• Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
[✓] VS Code (version 1.87.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.84.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-x64 • macOS 14.1 23B74 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 123.0.6312.106
[✓] Network resources
• All expected network resources are available.
• No issues found! [!] Flutter (Channel master, 3.22.0-11.0.pre.14, on macOS 14.1 23B74 darwin-x64, locale en-VN)
• Flutter version 3.22.0-11.0.pre.14 on channel master at /Users/huynq/Documents/GitHub/flutter_master
! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 817630ccf1 (51 minutes ago), 2024-04-15 22:56:25 -0400
• Engine revision 76fbe31a96
• Dart version 3.5.0 (build 3.5.0-61.0.dev)
• DevTools version 2.35.0-dev.8
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/huynq/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• ANDROID_HOME = /Users/huynq/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
• Xcode at /Applications/Xcode15.3.app/Contents/Developer
• Build 15E204a
• CocoaPods version 1.15.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2023.2)
• Android Studio at /Applications/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
• android-studio-dir = /Applications/Android Studio.app/
• Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
[✓] VS Code (version 1.88.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.86.0
[✓] Connected device (4 available)
• RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64 • Android 11 (API 30)
• iPhone (mobile) • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios • iOS 15.8 19H370
• macOS (desktop) • macos • darwin-x64 • macOS 14.1 23B74 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 123.0.6312.124
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category. @Auties00 (and also others facing the issue) Please try running app again on the latest master channel and confirm if this issue is fixed on your end. Thanks! |
Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. |
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of |
A listview with "complex" widgets inside doesn't lag on Chrome or Firefox for Windows or
MacOS, but it's completely unusable on chrome for Android and IOS
Here is an example, but probably any widget will produce the same effect:
Important Part: https://gist.github.com/Auties00/63dab901d0f203a619481398db3d1472
Website: https://auties00.github.io/#/
Source code: https://github.com/Auties00/hytaleserverhosting
As far as I know, I cannot debug a flutter web project on a mobile browser, so this data cannot
be provided
Target Platform: Web
Browser: Any mobile browser for android or ios, I tried chrome, safari and firefox
Devices: Huawei p30 pro, Huawei p30 lite, iPhone 11 Pro Max, iPhone XR
Flutter Doctor
The text was updated successfully, but these errors were encountered: