Jittering on Flutter Apps (iOS) when switched

Tested on iPhone X, 12.1.4 - Flutter Stable:
(see Video)
https://youtu.be/1mdM_Uv574w

When switching between apps (or launching the app), animations are jittering at the beginning - in particular, when scrolling through lists. I didn't test it on other devices. Experienced it both with the inKino app (made by a Googler) and my own app. Same is true on startup. Any idea on that?

i have the same problem too on iphone X (12.2)

Please add the output of flutter doctor -v.

Is this with debug or release builds?

Possible duplicate of #813

release build:

[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.1 18B75, locale de-DE)
    • Flutter version 1.0.0 at /Users/matthiaswolff/Desktop/flutter
    • Framework revision 5391447fae (3 months ago), 2018-11-29 19:41:26 -0800
    • Engine revision 7375a0f414
    • Dart version 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)

[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    • Android SDK at /Users/matthiaswolff/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)
    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.1, Build version 10B61
    • ios-deploy 1.9.4
    • CocoaPods version 1.5.3

[✓] Android Studio (version 3.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 33.0.1
    • Dart plugin version 182.5215
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)

[✓] Connected device (3 available)
    • Android SDK built for x86 • emulator-5554                            • android-x86 • Android 9 (API 28) (emulator)
    • MSW                       • 64b6a2961593dc9e3ca2f157166e12286ecb75a9 • ios         • iOS 12.1.4
    • iPhone XR                 • 53D5005C-5C64-4F4D-9991-80550B214612     • ios         • iOS 12.1 (simulator)

Is this with debug or release builds?

release builds

Did you test on a real device or only on the simulator?

@liyuqian

@liyuqian, you have any news for us? Desperately waiting.

@msw333

@msw333 : Sorry for the waiting. I got distracted by some other issues. Here's what I've found so far:

As Jittering on Flutter Apps (iOS) when switched #28113 (comment) mentioned, the 300ms gap I found earlier is actually because that I'm not touching the screen. Hence it's not a jank. I mistakenly thought it was a jank because our performance overlay seems to have a one-frame latency (i.e., the last blue bar is actually the second-last frame, not the last frame).
I did some tests again on iPhon6S with the performance overlay turned on. However, it seems that most of the times, there's no jank at all after switching: https://photos.app.goo.gl/2KjRRewZsFHYhgzM6
Sometimes I do see a big jank (~100ms) but that seems to have nothing to do with switching or starting the app. It usually happens after many scrollings, and it can be reproduced without switching the app. See
dart-timeline-2019-3-5.json.zip at about 309 seconds. I'm not sure if it's the same issue here. Nevertheless it's something that we need to fix (probably by creating a new issue).

As those findings didn't help much in fixing this, can you please help us get a little more information:

Run your reproduction app (in Shader warm up #27660 (comment)) using the master branch tip-of-the-tree Flutter in profile mode.
Turn on performance overlay (by pressing 'P' on your flutter run --profile command line) so we can know exactly which thread is causing the jank.
Reproduce the jank after switching, and post the video and the trace here.

I understand your frustration as it's still not fixed. I also desperately want to fix it and I'm frustrated too when I can't reproduce it and find something useful on my iPhone6S. Hopefully that we can learn something useful soon after your new video and trace.

@liyuqian

@liyuqian What about the gallery issues?

@i-schuetz: I just filed #30625. The issue that you reported seems to be a big one. We're working on it.

Issue is highly increased when having a more complex logic. In my chat app, which is using Streambuilder with Listview.builder, CachedNetworkImage + Firestore etc... in a tab view, I saw currently no other solution: I am displaying a 3sec ‚loading splashscreen‘ with a timer. After that, it is completely smooth. Issue is highly present on first startup + app switching on my iPhone X.

App is 50+ dart files, so I cannot easily put a reproducible code together...but I can assure that the reproducible code I was providing only shows a minimal effect. Really hope that i-schuetz‘s input is helping.

@i-schuetz : ignore #30625, I forgot --profile. Nevertheless, both your trace and my profile trace show problems in UI thread with frame build time. So I'm going to have a deeper look into that.

@liyuqian

@liyuqian Great! I join @msw333 in hoping that there will be a fix soon. At the moment I'm unable to recommend Flutter to clients, because of this.

I found that the image is only costing less than 5ms so it's not the biggest problem. The font loading is costing more than 50ms:

I'm adding traces for that: flutter-team-archive/engine#8477 . Once that engine PR is in the framework, you can also test your app to see if font loading is the culprit.

If that's the case, this would be a duplicate of #19350 .

We'll discuss and figure out a plan to solve it on Monday when the font experts come back.

Here is a single file test app which exhibits this issue more clearly: https://github.com/yunyu/flutter_scroll_stutter_test/blob/master/lib/main.dart

It consists of a feed containing images with a text overlay and a basic parallax effect.

@yunyu

@yunyu : Thank you very much for your example app! I did reproduced the stutter on an iPhone X, and it didn't stutter on an iPhone 6S. Given that it only happened on iPhone X, let's continue the discussion in #31086 (comment)

My iPhoneX has the same problem!! It is very apparent when launching the apps or switching apps from background to foreground——the frames drop...

Close this as this issue is a duplicate to

either Scroll performance significantly degraded on iPhone X, Xs devices due to irregular input events delivery. #31086 for the iPhonX/XS only scroll jank
or Add API for asynchronously loading a font #19350 for the start-up jank

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.

Navigation Menu

Repository navigation

Jittering on Flutter Apps (iOS) when switched #28113

14 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Jittering on Flutter Apps (iOS) when switched #28113

Description

Activity

cybernik commented on Feb 18, 2019

zoechi commented on Feb 19, 2019

zoechi commented on Feb 19, 2019

msw333 commented on Feb 19, 2019

zoechi commented on Feb 19, 2019

msw333 commented on Feb 19, 2019

zoechi commented on Feb 19, 2019

14 remaining items

msw333 commented on Apr 4, 2019

liyuqian commented on Apr 5, 2019

ivnsch commented on Apr 6, 2019

liyuqian commented on Apr 6, 2019

msw333 commented on Apr 6, 2019

liyuqian commented on Apr 6, 2019

ivnsch commented on Apr 7, 2019

liyuqian commented on Apr 7, 2019

yunyu commented on Apr 25, 2019

liyuqian commented on Apr 29, 2019

luckysmg commented on Jul 7, 2019

liyuqian commented on Aug 7, 2019

github-actions commented on Aug 14, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions