material_3_demo scrolling has jitters on 3.7

[iliyami]

Hi, I've just checked the flutter material 3 demo web site with my phone on chrome, and found out that scrolling has lags.

What's the problem? Is this an issue with the flutter framework itself or it's just a performance issue because of bad coding?

[iapicca]

@iliyami
you have a point, it really stutters in mid scrolling
(tested on pixel 3a)

screen recording

cc @TahaTesser

[exaby73]

Triage report

Having a simple ListView does not reproduce this behavior. But running the Material 3 Demo (Github link) locally, does indeed reproduce it. I am not sure if this is an optimization issue, or an issue with 3.7 scrolling

Code sample: Material 3 official demo https://github.com/flutter/samples/tree/main/material_3_demo

Video

RPReplay_Final1674821586.MP4

flutter doctor -v (Stable)

[!] Flutter (Channel stable, 3.7.0, on macOS 13.1 22C65 darwin-arm64, locale en-US)
    • Flutter version 3.7.0 on channel stable at /Users/nabeelparkar/fvm/versions/stable
    ! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/2.18.6/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nabeelparkar/fvm/versions/stable. Consider adding /Users/nabeelparkar/fvm/versions/stable/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b06b8b2710 (3 days ago), 2023-01-23 16:55:55 -0800
    • Engine revision b24591ed32
    • Dart version 2.19.0
    • DevTools version 2.20.1
    • 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 33.0.0)
    • Android SDK at /Users/nabeelparkar/Library/Android/sdk/
    • Platform android-33, build-tools 33.0.0
    • ANDROID_SDK_ROOT = /Users/nabeelparkar/Library/Android/sdk/
    • Java binary at: /Users/nabeelparkar/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nabeelparkar/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/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 11.0.13+0-b1751.21-8125866)

[✓] IntelliJ IDEA Ultimate Edition (version 2022.3.1)
    • IntelliJ at /Users/nabeelparkar/Applications/JetBrains Toolbox/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 71.3.6
    • Dart plugin version 223.8214.16

[✓] IntelliJ IDEA Ultimate Edition (version 2022.3.1)
    • IntelliJ at /Users/nabeelparkar/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/223.8214.52/IntelliJ IDEA.app
    • 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

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.1 22C65 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Brave Browser 109.1.47.186

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[delfme]

I was about to file an issue for this.

This occurs also in our app on both latest master and stable channels. I noticed that keeping the finger onto the screen (while scrolling) resolves the janks. So it might be somehow related to the tap-up gesture of the swipe up/down action

[delfme]

Normal scrolling

FullSizeRender.MOV

Scrolling with the finger onto the screen

FullSizeRender.MOV

Impeller for iOS fixed it. Issue is only on android

[delfme]

@exaby73 yea this is much visible when listView is not too simple. I thought this issue was caused by a platform view also placed on the scene (outside the list) as reported with flutter/flutter#119337. But then I noticed issue occurs also without native platform.

Although here we cite material3 example, it is not related to material3. It also looks somehow related to the swipe gesture, if the finger leaves the screen the scrolling jittery takes in. Due to it app looks bad on android, hope you guys can fix it soon 🤞

[spkersten]

I think I noticed the same on iOS. But when screen recording is running everything is smooth.

[delfme]

@exaby73 yea this is much visible when listView is not too simple. I thought this issue was caused by a platform view also placed on the scene (outside the list) as reported with flutter/flutter#119337. But then I noticed issue occurs also without native platform.

Although here we cite material3 example, it is not related to material3. It also looks somehow related to the swipe gesture, if the finger leaves the screen the scrolling jittery takes in. Due to it app looks bad on android, hope you guys can fix it soon 🤞

Ofc Im referring to flutter android, not just flutter web. Issue seems trasversal.

[guidezpl]

I had filed #1602

[gnprice]

I reproduce the issue when running that demo app as an Android app too (flutter run -d pixel --release), not only on web.

For me it also reproduces even when my finger stays continuously on the screen, so that I'm always dragging and never flinging. It'll be moving smoothly under my finger, then suddenly display a shuddering or jittering effect. I believe what's happening is that it briefly fails to follow my finger, then suddenly catches up a moment later.

Here's screen recordings of that effect, with my finger always on the screen. One is in release mode, and then one is in profile mode showing the performance overlay. In the profile-mode recording, one thing I see is that the shudders seem to coincide with slow frames. So that suggests that the root cause is a performance issue.

(If you watch these directly in the GitHub web interface, the effect is visible but not nearly as conspicuous as it is in real life. If you download them and watch in a local video player, the effect sticks out a lot more, much like it does on the real device.)

Release mode	Profile mode
shudder-release.mp4	shudder-profile.mp4

[iJack93]

Hi everyone! I haven't noticed any lag issue on mobile, this behavior happens only with the web.
The following two video are about the flutter material 3 demo available online on iOS:

20230818_091328.MP4

RPReplay_Final1692342459.MP4

This, instead, is the result of loading the flutter web demo 3 page on an android device (Samsung A53) with its native browser.

d009f485-0fe4-478d-bbbe-3cafc9e6a28f.MP4

This thing has nothing to do with material 3, it was present before too.
Any idea on how to solve this? To avoid this, I've tried suggestions on #56257 and related with ListView(children:[...]), ListView.builder(...), SingleChildScrollView(child:Column(...)) and SingleChildScrollView(child:RepaintBoundary(child:Column(...))) but I cannot make it better.

Flutter on mobile works perfect and is very smooth, but on the web is very laggy.
Thanks for your help and time!

[Kataglyphis]

The problem still persists. I can reproduce it right now.
Anyone found a workaround and want to share it ? ;)