Skip to content
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

Closed
Auties00 opened this issue Jun 12, 2020 · 40 comments
Labels
browser: firefox only manifests in Firefox c: performance Relates to speed or footprint issues (see "perf:" labels) f: scrolling Viewports, list views, slivers, etc. found in release: 1.19 Found to occur in 1.19 found in release: 1.20 Found to occur in 1.20 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list platform-android Android applications specifically platform-web Web applications specifically team-framework Owned by Framework team triaged-framework Triaged by Framework team waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds

Comments

@Auties00
Copy link

Auties00 commented Jun 12, 2020

  1. 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

  2. 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

  3. As far as I know, I cannot debug a flutter web project on a mobile browser, so this data cannot
    be provided

  4. 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

  5. Flutter Doctor

[√] Flutter (Channel master, 1.19.0-5.0.pre, on Microsoft Windows [Versione 10.0.18363.900], locale it-IT)
    • Flutter version 1.19.0-5.0.pre at C:\flutter
    • Framework revision 28138ec5e3 (8 days ago), 2020-06-04 00:33:01 -0400
    • Engine revision 2608f2ee9f
    • Dart version 2.9.0 (build 2.9.0-13.0.dev 54adfeb93f)

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.4.3)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.4.29709.97

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 42.1.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] VS Code (version 1.41.1)
    • VS Code at C:\Users\Ale\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.7.1

[√] Connected device (3 available)
    • Windows    • Windows    • windows-x64    • Microsoft Windows [Versione 10.0.18363.900]
    • Web Server • web-server • web-javascript • Flutter Tools
    • Chrome     • chrome     • web-javascript • Google Chrome 83.0.4103.97
@Auties00 Auties00 added the from: performance template Issues created via a performance issue template label Jun 12, 2020
@Auties00
Copy link
Author

Update:
The issue is fixed on:
Samsung galaxy note 9
Huawei p20 lite

The issue remains for other devices, but it's much better:
https://gist.github.com/Auties00/e915e80e8db32364466ef6ddccc9eed1

@TahaTesser TahaTesser removed the from: performance template Issues created via a performance issue template label Jun 15, 2020
@TahaTesser
Copy link
Member

TahaTesser commented Jun 15, 2020

Hi @Auties00
Can you please provide and a complete reproducible runnable minimal code sample without using third party packages

Sample you provided depends on packages, please isoalte listview lag code sample
Thank you

@TahaTesser TahaTesser added in triage Presently being triaged by the triage team waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds labels Jun 15, 2020
@Auties00
Copy link
Author

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

@no-response no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jun 17, 2020
@TahaTesser
Copy link
Member

Hi @Auties00
Tried code sample based your description, no issues on mobile web

https://elastic-leakey-a57280.netlify.app/#/

Code Sample
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: ListView(
        children: [
          Container(
            color: Colors.blue,
            child: Image.network('https://i.imgur.com/QCNbOAo.png'),
          ),
          SizedBox(height: 10),
          Container(
            color: Colors.blue,
            child: Image.network('https://i.imgur.com/QCNbOAo.png'),
          ),
          SizedBox(height: 10),
          Container(
            color: Colors.blue,
            child: Image.network('https://i.imgur.com/QCNbOAo.png'),
          ),
          SizedBox(height: 10),
          Container(
            color: Colors.blue,
            child: Image.network('https://i.imgur.com/QCNbOAo.png'),
          ),
          SizedBox(height: 10),
          Container(
            color: Colors.blue,
            child: Image.network('https://i.imgur.com/QCNbOAo.png'),
          ),
          SizedBox(height: 10),
          Container(
            color: Colors.blue,
            child: Image.network('https://i.imgur.com/QCNbOAo.png'),
          ),
          SizedBox(height: 10),
          Container(
            color: Colors.blue,
            child: Image.network('https://i.imgur.com/QCNbOAo.png'),
          ),
          SizedBox(height: 10),
          Container(
            color: Colors.blue,
            child: Image.network('https://i.imgur.com/QCNbOAo.png'),
          ),
          SizedBox(height: 10),
          Container(
            color: Colors.blue,
            child: Image.network('https://i.imgur.com/QCNbOAo.png'),
          ),
          SizedBox(height: 10),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }
}

flutter doctor -v
[✓] Flutter (Channel master, 1.20.0-1.0.pre.91, on Mac OS X 10.15.5 19F101,
    locale en-GB)
    • Flutter version 1.20.0-1.0.pre.91 at /Users/tahatesser/Code/flutter_master
    • Framework revision 9c3f0faa6d (10 hours ago), 2020-06-17 18:47:54 -0400
    • Engine revision 965fbbed17
    • Dart version 2.9.0 (build 2.9.0-14.0.dev 2b917f5b6a)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.0
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.3

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

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 46.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

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

[✓] Connected device (5 available)
    • SM M305F      • 32003c30dc19668f          • android-arm64  • Android 10
      (API 29)
    • Taha’s iPhone • 00008020-001059882212002E • ios            • iOS 13.5.1
    • macOS         • macOS                     • darwin-x64     • Mac OS X
      10.15.5 19F101
    • Web Server    • web-server                • web-javascript • Flutter Tools
    • Chrome        • chrome                    • web-javascript • Google Chrome
      83.0.4103.106

• No issues found!

@TahaTesser TahaTesser added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jun 18, 2020
@Auties00
Copy link
Author

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

@no-response no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jun 18, 2020
@Auties00
Copy link
Author

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?

@TahaTesser TahaTesser removed the in triage Presently being triaged by the triage team label Jun 19, 2020
@TahaTesser TahaTesser changed the title Flutter Web: ListView lags a lot on mobile browsers Flutter Web: ListView lags a lot on mobile browsers, inconsistent performance on different devices on different browsers Jun 19, 2020
@TahaTesser TahaTesser added f: scrolling Viewports, list views, slivers, etc. found in release: 1.19 Found to occur in 1.19 found in release: 1.20 Found to occur in 1.20 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on platform-android Android applications specifically platform-web Web applications specifically c: performance Relates to speed or footprint issues (see "perf:" labels) browser: firefox only manifests in Firefox labels Jun 19, 2020
@Auties00
Copy link
Author

So what now?

@yjbanov
Copy link
Contributor

yjbanov commented Jun 25, 2020

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.

@yjbanov yjbanov added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jun 25, 2020
@Auties00
Copy link
Author

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

@no-response no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jun 27, 2020
@Auties00
Copy link
Author

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

@exaby73
Copy link
Member

exaby73 commented Apr 18, 2023

I cannot reproduce this issue on my iOS device (12 Pro Max), with Chrome, Firefox or Safari. @Auties00 can you confirm on this?

@exaby73 exaby73 added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 18, 2023
@RoarGronmo
Copy link

Still a problem in ListView.builder when
Using card

  • You have Icons
  • You have wrapped some elements in IntrinsicHeight to "redraw" to catch height i.e. for VerticalDivider.

Tested in real device Samsung S9+ SM-G965F, One UI v2.5, Android 10, Chrome version 112.0.5615.136

Flutter version
Flutter (Channel beta, 3.10.0-1.4.pre, on Microsoft Windows [Version 10.0.22621.1555], locale nb-NO)

@Auties00
Copy link
Author

I cannot reproduce this issue on my iOS device (12 Pro Max), with Chrome, Firefox or Safari. @Auties00 can you confirm on this?

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.

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 30, 2023
@flutter-triage-bot flutter-triage-bot bot added multiteam-retriage-candidate team-framework Owned by Framework team triaged-framework Triaged by Framework team labels Jul 8, 2023
@iJack93
Copy link

iJack93 commented Aug 18, 2023

This keeps happening even on the material demo 3 online. Here my videos: flutter/samples#2009
This behavior happend on Safari Mobile, Chrome Mobile and Firefox mobile

@AleXoTroN
Copy link

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:
https://e1547.clynamic.net/

@Ultranmus
Copy link

Same issue in my portfolio website ,sometime the scroll is lagging in chrome in mobile device. But is laptop it works totally fine.

@AleXoTroN
Copy link

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:
Just force flutter to use the canvaskit web-renderer when building your web app. It's completely smooth for me now on mobile

@Ultranmus
Copy link

@AleXoTroN,

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?

@AleXoTroN
Copy link

AleXoTroN commented Oct 7, 2023

@Ultranmus
I just did "flutter build web --release --web-renderer=canvaskit" and everything works fine. You should maybe check the errors in the web console regarding the images when you open your web page from your computer

@Ultranmus
Copy link

@AleXoTroN
The issue is not in image it is in flutter itself, for canvaskit it throw error but for html web renderer it work fine.
You can check out the image resource's i am using - https://pngimg.com/uploads/mysql/small/mysql_PNG36.png
There are many more image that are not processed in canvaskit web renderer but work fine in html. I tried varies network image packages like cached_network_image but that also do not work for such image in canvaskit web renderer.

@Boahen123
Copy link

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

@AleXoTroN
Copy link

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.

@Ultranmus
Copy link

Ultranmus commented Oct 26, 2023

@AleXoTroN
But if we use canvaskit then all type of network image are not supported in flutter.

@Boahen123
Copy link

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.

Thank you for this. Kindly guide me on how to do this exactly. thanks

@knottx
Copy link

knottx commented Feb 3, 2024

Still issue for 4 years 😞

@Kataglyphis
Copy link

Still issue for 4 years 😞

I can relate ... Still the same issue.

@AleXoTroN
Copy link

Still issue for 4 years 😞

I can relate ... Still the same issue.

It's gone for me since 2 years

@AleXoTroN
Copy link

Still issue for 4 years 😞

I can relate ... Still the same issue.

Here is the solution:
#59332 (comment)

@huycozy
Copy link
Member

huycozy commented Apr 16, 2024

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 stable channel 3.19.5 but it seems to be fixed on the latest master channel 3.22.0-11.0.pre.14.

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!

@huycozy huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 16, 2024
Copy link

github-actions bot commented May 7, 2024

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now.
If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones.
Thanks for your contribution.

@github-actions github-actions bot closed this as completed May 7, 2024
Copy link

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 flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 21, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
browser: firefox only manifests in Firefox c: performance Relates to speed or footprint issues (see "perf:" labels) f: scrolling Viewports, list views, slivers, etc. found in release: 1.19 Found to occur in 1.19 found in release: 1.20 Found to occur in 1.20 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list platform-android Android applications specifically platform-web Web applications specifically team-framework Owned by Framework team triaged-framework Triaged by Framework team waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds
Projects
None yet
Development

No branches or pull requests