Jittering on Flutter Apps (iOS) when switched #28113

msw333 · 2019-02-18T19:00:34Z

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?

cybernik · 2019-02-18T23:03:56Z

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

zoechi · 2019-02-19T07:06:31Z

Please add the output of flutter doctor -v.

Is this with debug or release builds?

zoechi · 2019-02-19T07:08:11Z

Possible duplicate of #813

msw333 · 2019-02-19T08:56:56Z

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)

zoechi · 2019-02-19T10:04:29Z

Is this with debug or release builds?

msw333 · 2019-02-19T10:06:34Z

release builds

zoechi · 2019-02-19T10:10:33Z

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

msw333 · 2019-02-19T10:13:52Z

Real device. iPhone X, see video https://youtu.be/1mdM_Uv574w - issue is very noticeable and observable for my app as well as for the app inKino (made by a Googler). So it does not seem to be an issue in my code.

zoechi · 2019-02-19T10:21:22Z

Right, I only looked at the Connected device list from flutter doctor -v.

So it does not seem to be an issue in my code.

I don't think so. #813 is also still open.

msw333 · 2019-02-19T10:26:37Z

Ok. Well, it is an issue which makes awesome and butterly smooth Flutter apps not as shiny as they could be. Initial lag is highly observable on first start as well as when switching between apps without 'waiting for 1-2 seconds'. Much worse than shown in the video...

frasza · 2019-03-05T21:15:57Z

Also experiencing same issues with iPhone XS.

liyuqian · 2019-03-21T23:23:54Z

To allow us to better help you solve this issue, can you please:

Run your app with flutter run --profile --trace-skia, save the trace from observatory timeline, and upload it here so we can take a deeper look?
Construct a single-file minimal Flutter app that can reproduce the issue. That way, we can test our fixes and maybe add it to our continuous performance benchmarks.

liyuqian · 2019-03-24T18:02:35Z

I did reproduce it on iPhone 6S using the code in #27660 (comment)

Below is the trace of the jittering scroll right after switching the app.
dart-timeline-2019-2-24 (1).json.zip

Around 20s, I found two things:

Our in-memory compiled shader is gone after app switches on iOS. I suspect that it's caused by iOS memory management since if don't do a lot of things on the other app, then the compiled shader will still be there.
As a result, in the trace, the first frame right after switch is spending ~30ms on shader compilation. We can also tell that our persistent SKSL shader cache is working as we can see PersistentCacheLoadHit events. Without those, it will be more like 200-300ms shader compilation instead of 30ms shader compilation. Anyway, since this is the first frame, and it's just 30ms, I suspect that it's not the major reason of the jittering.
Right after that 30ms first frame, we're waiting for ~300ms before pumping the second frame. I believe this is the major reason of jittering. During that time, all our threads seem to be quite idle. @chinmaygarde : Is this expected on iOS? @bkonyi : I saw some Engine::DispatchPointerDataPacket, Dart_InvokeClosure, RuntimeController::DispatchPointerDataPacket during that 300ms before we issue the next vsync event; is there any suspicious Dart issue you can see from it?

liyuqian · 2019-03-25T23:58:56Z

It seems that the 300ms gap could be just waiting for the user input events. So it may not be the issue. I'll reinvestigate the issue.

ivnsch · 2019-03-26T08:55:42Z

Moving the last gallery comments here as it seems more appropriate than in the PR

Attached the trace from opening the 4 items after closing the app.

Also attached videos. As @msw333 says they don't do it justice, but still clearly noticeable. It helps watching at 0.5 or 0.25 speed.

As mentioned before after closing is better, but there's still jank.

In particular the 3d item it feels like it jumps directly to the open state.

trace_after_close.zip

First launch after installation: https://youtu.be/-gTVXqrJyqo
Launch after force-close: https://youtu.be/P9CJ3gcyUW0

liyuqian · 2019-03-26T17:51:05Z

Thanks @i-schuetz ! Your trace on the 3rd item after closing the app is especially informative.

Just to confirm:

your "after launch" means the first launch after an installation (or a clearing the app's data)
your "after close" means launch the app again after closing it

Right?

ivnsch · 2019-03-26T18:15:37Z

@liyuqian That's good to read. After launch means the first launch after installation. After close means launching the app after force-close (home button > swipe app out of the screen). Edited the post to make it clearer.

msw333 · 2019-04-04T22:42:08Z

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

liyuqian · 2019-04-05T18:50:17Z

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

ivnsch · 2019-04-06T20:22:35Z

@liyuqian What about the gallery issues?

liyuqian · 2019-04-06T23:12:44Z

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

msw333 · 2019-04-06T23:24:59Z

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.

liyuqian · 2019-04-06T23:49:30Z

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

ivnsch · 2019-04-07T18:12:26Z

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

liyuqian · 2019-04-07T18:46:20Z

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

yunyu · 2019-04-25T18:19:29Z

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.

liyuqian · 2019-04-29T22:39:58Z

@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)

luckysmg · 2019-07-07T02:13:13Z

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

liyuqian · 2019-08-07T17:25:45Z

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

github-actions · 2021-08-14T03:01:15Z

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.

zoechi added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 19, 2019

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 Feb 19, 2019

zoechi added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 19, 2019

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 Feb 19, 2019

zoechi added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 19, 2019

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 Feb 19, 2019

zoechi added platform-ios iOS applications specifically framework flutter/packages/flutter repository. See also f: labels. engine flutter/engine repository. See also e: labels. c: performance Relates to speed or footprint issues (see "perf:" labels) labels Feb 19, 2019

zoechi added this to the Goals milestone Feb 19, 2019

msw333 mentioned this issue Mar 19, 2019

Jittery performance on first run of animation/transitions due to shader compilations #813

Closed

liyuqian mentioned this issue Mar 24, 2019

Shader warm up #27660

Merged

liyuqian self-assigned this Mar 26, 2019

liyuqian mentioned this issue Apr 6, 2019

flutter_gallery's frame build time is super slow on iPhone6S (and possibly other newer iPhones too) #30625

Closed

liyuqian mentioned this issue Apr 7, 2019

flutter_gallery's driver test doesn't show image resources #30641

Closed

bobmoff mentioned this issue Apr 16, 2019

Scroll performance significantly degraded on iPhone X, Xs devices due to irregular input events delivery. #31086

Closed

yunyu mentioned this issue Jul 22, 2019

Fix janky scrolls on iPhone X/XS #36616

Closed

liyuqian closed this as completed Aug 7, 2019

github-actions bot locked as resolved and limited conversation to collaborators Aug 14, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Jittering on Flutter Apps (iOS) when switched #28113

Jittering on Flutter Apps (iOS) when switched #28113

msw333 commented Feb 18, 2019 •

edited

cybernik commented Feb 18, 2019

zoechi commented Feb 19, 2019

zoechi commented Feb 19, 2019

msw333 commented Feb 19, 2019 •

edited by zoechi

zoechi commented Feb 19, 2019

msw333 commented Feb 19, 2019

zoechi commented Feb 19, 2019

msw333 commented Feb 19, 2019

zoechi commented Feb 19, 2019

msw333 commented Feb 19, 2019

frasza commented Mar 5, 2019

liyuqian commented Mar 21, 2019

liyuqian commented Mar 24, 2019

liyuqian commented Mar 25, 2019

ivnsch commented Mar 26, 2019 •

edited

liyuqian commented Mar 26, 2019

ivnsch commented Mar 26, 2019 •

edited

msw333 commented Apr 4, 2019 •

edited

liyuqian commented Apr 5, 2019

ivnsch commented Apr 6, 2019

liyuqian commented Apr 6, 2019

msw333 commented Apr 6, 2019 •

edited

liyuqian commented Apr 6, 2019 •

edited

ivnsch commented Apr 7, 2019

liyuqian commented Apr 7, 2019

yunyu commented Apr 25, 2019 •

edited

liyuqian commented Apr 29, 2019

luckysmg commented Jul 7, 2019

liyuqian commented Aug 7, 2019

github-actions bot commented Aug 14, 2021

Jittering on Flutter Apps (iOS) when switched #28113

Jittering on Flutter Apps (iOS) when switched #28113

Comments

msw333 commented Feb 18, 2019 • edited

cybernik commented Feb 18, 2019

zoechi commented Feb 19, 2019

zoechi commented Feb 19, 2019

msw333 commented Feb 19, 2019 • edited by zoechi

zoechi commented Feb 19, 2019

msw333 commented Feb 19, 2019

zoechi commented Feb 19, 2019

msw333 commented Feb 19, 2019

zoechi commented Feb 19, 2019

msw333 commented Feb 19, 2019

frasza commented Mar 5, 2019

liyuqian commented Mar 21, 2019

liyuqian commented Mar 24, 2019

liyuqian commented Mar 25, 2019

ivnsch commented Mar 26, 2019 • edited

liyuqian commented Mar 26, 2019

ivnsch commented Mar 26, 2019 • edited

msw333 commented Apr 4, 2019 • edited

liyuqian commented Apr 5, 2019

ivnsch commented Apr 6, 2019

liyuqian commented Apr 6, 2019

msw333 commented Apr 6, 2019 • edited

liyuqian commented Apr 6, 2019 • edited

ivnsch commented Apr 7, 2019

liyuqian commented Apr 7, 2019

yunyu commented Apr 25, 2019 • edited

liyuqian commented Apr 29, 2019

luckysmg commented Jul 7, 2019

liyuqian commented Aug 7, 2019

github-actions bot commented Aug 14, 2021

msw333 commented Feb 18, 2019 •

edited

msw333 commented Feb 19, 2019 •

edited by zoechi

ivnsch commented Mar 26, 2019 •

edited

ivnsch commented Mar 26, 2019 •

edited

msw333 commented Apr 4, 2019 •

edited

msw333 commented Apr 6, 2019 •

edited

liyuqian commented Apr 6, 2019 •

edited

yunyu commented Apr 25, 2019 •

edited