Open iliyami opened 1 year ago
@iliyami you have a point, it really stutters in mid scrolling (tested on pixel 3a)
cc @TahaTesser
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
flutter doctor -v
(Stable)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
Normal scrolling
Scrolling with the finger onto the screen
Impeller for iOS fixed it. Issue is only on android
@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 🤞
I think I noticed the same on iOS. But when screen recording is running everything is smooth.
@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.
I had filed https://github.com/flutter/samples/issues/1602
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 |
---|---|
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:
https://github.com/flutter/flutter/assets/59367369/6d8c3f9a-5469-444e-9a55-324790a6c4b9
https://github.com/flutter/flutter/assets/59367369/ef13f090-63bc-413b-ba3b-a2bf7f614654
This, instead, is the result of loading the flutter web demo 3 page on an android device (Samsung A53) with its native browser.
https://github.com/flutter/flutter/assets/59367369/0163b433-a432-416f-8a35-92ebe3a0b7f7
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!
The problem still persists. I can reproduce it right now. Anyone found a workaround and want to share it ? ;)
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?