Scrolling Flutter Web App on mobile chrome is extremely slow and laggy

[hivesey]

Hi,

I have a very simple website, www.hivesey.us

Browsing the website on phone's chrome browser is extremely slow, laggy, results in black frames and in "Aw, snap! Something went wrong while displaying this webpage..." message.

But the site works perfectly fine in chrome browser on Mac.

I have used simple containers and column widgets with not more than 3-4 children.

I am on Flutter (Channel beta, v1.17.0-3.4.pre, on Mac OS X 10.14.6 18G103, locale en-US)

Is this expected behavior, please let me know if you would like me to share my github code?

Thanks,

[jonahwilliams]

It seems like the URL you posted doesn't work

[realrk95]

It works fine on chrome and edge on my phone. The page does take some time to load.

[hivesey]

There was an issue before with DNS forwarding, the website should load fine now. The site loads fine on mobile browser, but the issue is if you try scrolling, it slows down, blacks out & "Aw..snap.."message comes up.

…

On Sun, May 3, 2020, 8:21 PM Rahul Kumar ***@***.***> wrote: It works fine on chrome and edge on my phone. The page does take some time to load. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#56257 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALGTSFUP7S7HW2IQCK4EVT3RPYDCNANCNFSM4MYJPDZA> .

[Mravuri96]

i believe this is the correct url https://hivesey-88262.firebaseapp.com/#/

[hivesey]

Yes, had some issues setting up custom domain, hence just forwarding from goole domains to firebase. But, if you click on the link "Matchsey" on the top nav bar, that page is even more slower than the home page.

…

On Mon, May 4, 2020 at 3:15 AM Demetrio Filocamo ***@***.***> wrote: @jonahwilliams <https://github.com/jonahwilliams> I can see it and it has serious issues, it redirects here: https://hivesey-88262.firebaseapp.com/#/ — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#56257 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALGTSFVTXCRPLMRVS2T645DRPZTSPANCNFSM4MYJPDZA> .

[yjbanov]

Thanks for filing the issue. Would you be able to host a --profile build of the app. The deployed version is using --release mode, which obfuscates all symbols, making it hard to tell what's going on.

Alternatively, you can provide a simplified version of the app in Dart source code that we could try compiling and running locally.

[hivesey]

1) Deployed --profile version of the app. 2) Here is the simplified version of the Dart code <https://github.com/hivesey/hivesey_web>for the app/web Thanks for looking into this. Please let me know if you have any questions.

…

On Thu, May 7, 2020 at 5:54 PM Yegor ***@***.***> wrote: Thanks for filing the issue. Would you be able to host a --profile build of the app. The deployed version is using --release mode, which obfuscates all symbols, making it hard to tell what's going on. Alternatively, you can provide a simplified version of the app in Dart source code that we could try compiling and running locally. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#56257 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALGTSFRNNS6MBNFXN4YZBFLRQMU2BANCNFSM4MYJPDZA> .

[ferhatb]

@hivesey we added some optimizations for culling paint ops outside visible areas. Can you please retry and let is know if you are still seeing issue.

[ferhatb]

Update: we have optimized image reuse which should help your app since majority of time seems to be spent on image repaints which will land in flutter shortly flutter/engine#18437. We will continue investigating/profiling issue.

[tomasbaran]

I had a very similar issue in my project which unfortunately is not live anymore since the API stopped providing the data. You can check out whatever's got left: https://covid19-world-tracker.web.app/

Here is my full code: https://github.com/tomasbaran/corona_app

The main issue was the lagging/jank as mentioned above to a point almost unusable. The problem started when one wanted to scroll. It was lagging as if I was using a computer from the last century.

The interesting thing is that it was working very well as an iOS/Android app. The scrolling lagging issue was present only on the web/desktop version.

[yasinarik]

I really want to go full production with Flutter but it is unreliable :(

60fps scrolling is a fundamental feature.

[apps-transround]

My experience comes from a real world problem but I simplified the code just to demonstrate that

• A border in a container can slow down scrolling in Flutter web even resulting in black/white flashing screen.
  I've tested it in debug and release mode on Chrome desktop and mobile.

By removing border: Border(left: BorderSide(color: Colors.green)), the speed goes up to normal.

void main() {
  runApp(
    WebScrollTest(),
  );
}

class WebScrollTest extends StatelessWidget {
  final int rowCount = 30;
  final int columnCount = 30;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Two-way scroll'),
            ),
            body: SingleChildScrollView(
              child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Column(mainAxisSize: MainAxisSize.max, children: <Widget>[
                    ...List.generate(
                      rowCount,
                      (int i) => Row(children: [
                        ...List.generate(
                          columnCount,
                          (int j) => Container(
                            width: 100,
                            height: 80,
                            child: contentCellBuilder(j, i),
                          ),
                        ),
                      ]),
                    ),
                  ])),
            )));
  }

  Widget contentCellBuilder(int i, int j) {
    return Container(
        decoration: BoxDecoration(
// by removing this border, FPS goes up to normal
          border: Border(
            left: BorderSide(color: Colors.green),
          ),
//
        ),
        child: Text('Dummy cell content: $i - $j'));
  }
}

I could find a workaround so this just to help investigating the issue.
As a benchmark: in Android app there is no visible difference.

C:\flutter\bin\flutter.bat doctor --verbose
[√] Flutter (Channel master, 1.19.0-2.0.pre.195, on Microsoft Windows [Version 10.0.17134.885], locale en-GB)
• Flutter version 1.19.0-2.0.pre.195 at C:\flutter
• Framework revision 42c4c30 (3 days ago), 2020-05-29 12:53:01 -0400
• Engine revision c19459a
• Dart version 2.9.0 (build 2.9.0-11.0.dev 6489a0c68d)

[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
• Android SDK at C:/Android/android-sdk
• Platform android-29, build-tools 28.0.3
• ANDROID_HOME = C:/Android/android-sdk
• Java binary at: C:\Android\android-studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

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

[√] Android Studio (version 4.0)
• Android Studio at C:\Android\android-studio
• Flutter plugin version 46.0.2
• Dart plugin version 193.7361
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] Connected device (2 available)
• Web Server • web-server • web-javascript • Flutter Tools
• Chrome • chrome • web-javascript • Google Chrome 83.0.4103.61

! Doctor found issues in 1 category.

[spicybackend]

@apps-transround's find is what was setting my app back, which had very noticeable frame drops, but only in a mobile browser. Maybe the debugger on PC is fast enough to get away with 🤷‍♂️

• A border in a container can slow down scrolling in Flutter web even resulting in black/white flashing screen.

By removing border: Border(left: BorderSide(color: Colors.green)), the speed goes up to normal.

In my case, I had a border-radius set up on a few containers with images inside of them. Removing them left the app running buttery smooth again on mobile. An annoying workaround for now but hopefully this is resolved soon 🤞

[rjcalifornia]

@ferhatb I fixed by using SKIA=true for building the web app

[maliknajjar]

I had the same problem .. scrolling is very laggy on web but not on mobile .. scroll lagginess goes away when removing borders or gradient backgrounds or shadowBoxes from childrean Containers .. my problem was fixed by replacing the combination of SingleChildScrollView and Column:

to ListView:

and now its smooth for me on web

although in some other pages I use SingleChildScrollView and Column with containers that have borders and boxShadows but it works fine .. the problem occurs in only that page I mentioned above .. the page I mentioned above has Stack widget while this page don't use Stack widget

[nilsreichardt]

Maybe this is related to #75850

[hussamDana92]

I have the same issues, Flutter web scroll lags on phone browsers
it's very bad

[AryashDubey]

Flutter web scroll is not smooth in mid-tier mobiles or lower. Also the scroll doesn't feels natural.

Steps To Reproduce

1. Just open any flutter website for example https://hivesey-88262.firebaseapp.com/#/
2. Open chrome developer tools. Switch to mobile mode and select mid tier mobile option.
3. Scroll the website and notice the lag.
   To check if the scroll is natural or not just open the above mentioned website. Scroll it and just compare to any website (developed in native html/css/js) and notice that the scroll doesn't feels natural (Its kind of dull and not smooth unlike the other websites).

I have tried the stable flutter version as well as the developer one! It acted the same way! Also this is happening to not just this website this is also happening to the flutter gallery example which is optimised by the flutter team for optimal performance. I hope this issue will get resolved soon.

[P-B1101]

any update on how to fix this issue or is there a plan to fix this issue in short time like 1 month?!!

[sajithlaldev]

I am also facing same issue since I first used flutter web for my portfolio website (Android chrome on Redmi Note 5). There is janky issues when scrolling. I feel so bad for this bug and it repulse me from using flutter for web applications.
Note : Also tried using ListView instead of SingleChildScrollView mentioned by @malik446644

[BenjaminMahmic]

I resolve the lagging on the website by changing SingleChildScrollView and Column by ListView.builder. After this, scrolling goes very well.

[P-B1101]

listview.builder does not helped me. I used flutter build web --web-renderer canvaskit --no-sound-null-safety to fix scrolling issue on phone.

[ehcpdeveloper]

I live very similar issue. Slow and laggy scrolling on web, called from mobile/tablet devices. Desktop web also not very fluent. I tried also --release, no luck.
Reducing page complexity and shadows helped a little bit, but did not solve completely.

[sajithlaldev]

Any update on this? or will be? It's been years. They are not considering web. I dont know why! Please take a look at it @flutter

[martinpelli]

Same here, started to learn flutter to make my personal website (very simple website) , and works perfect on desktop but on my iphone 8 plus with safari, scrolling is extremly laggy, fonts are cutted off and fonts overflow the container in privacy policy page.
I check it before deploying with responsivness that chrome dev tools offers and no one of this problems were there.

bitfried.com

[rjcalifornia]

Alright guys, and other people that arrive from Stack Overflow:

It is not a solution, but it really improved the issue:

RUN with SKIA

However, keep in mind this:
https://docs.flutter.dev/release/breaking-changes/platform-views-using-html-slots-web#summary

Either way, I was able to reduce all Flutter Web Shenanigans by using SKIA:

flutter run -d Chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --release

Here's the catch: As I said at the beginning of the post: RUN. You will have to Grab the files created after running Flutter Web with SKIA. If you useBUILD for Web instead, you won't get the SKIA benefits.

WHY!?

I have no idea.

[ps6067966]

In my case, there is no jank.
I need to press with two fingers to scroll in chrome mobile.
Flutter 2.10.5
Please fix this issue.
http://gowinquiz.gocrackit.com/
Here is an example.

[pinpong]

@ps6067966 works very well on my pixel 5 in chrome

[oliverbytes]

Mine is even built in Flutter 3, with 2 images and it's slow. https://liso.dev source: https://github.com/liso-vault/landing

[apps-transround]

To check if it's a repaint issue please wrap the Container just inside the SingleChildScrollView into a RepaintBoundary (lib/main/main.screen.dart:225) and test the performance.

[yjbanov]

I'm going to close this issue as the information is no longer actionable. The original post does not contain a repro case and the link is broken. The discussion points to multiple unrelated issues, with sample apps using outdated versions of Flutter. It's better to file each issue separately with individual repro cases.

[github-actions]

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.