Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[regression] Janky gridView on android #121351

Closed
delfme opened this issue Feb 23, 2023 · 10 comments · Fixed by flutter/engine#39918
Closed

[regression] Janky gridView on android #121351

delfme opened this issue Feb 23, 2023 · 10 comments · Fixed by flutter/engine#39918
Labels
a: images Loading, displaying, rendering images c: performance Relates to speed or footprint issues (see "perf:" labels) engine flutter/engine repository. See also e: labels. f: scrolling Viewports, list views, slivers, etc. found in release: 3.7 Found to occur in 3.7 found in release: 3.8 Found to occur in 3.8 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list

Comments

@delfme
Copy link

delfme commented Feb 23, 2023

Scrolling a gridView is extremely janky on android.
The issue triggers after resuming app from background.

Tested on latest stable and master 3.8.0-15.0.pre.25, xiaomi mi lite 11.

Steps to Reproduce

Please run this example here:
https://github.com/delfme/janky-gridview-scrolling

Expected results:
Smooth scrolling.

Actual results:
See video below.
I marked this as a regression coz scrolling on android has never been smooth for us but issue got worse lately.

videozip_493.MP4

Flutter doctor:

[✓] Flutter (Channel master, 3.8.0-15.0.pre.25, on macOS 12.2 21D49 darwin-arm64, locale en-IT)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
✗ cmdline-tools component is missing
Run path/to/sdkmanager --install "cmdline-tools;latest"
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run flutter doctor --android-licenses to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

@huycozy huycozy added the in triage Presently being triaged by the triage team label Feb 24, 2023
@huycozy
Copy link
Member

huycozy commented Feb 24, 2023

Hi @delfme
Which Flutter version do you find it works better?

I also check some similar issues and see your old issue at #120205 which is reproduced with ListView instead. I'm not sure if its patch fix can be applied to this issue, but I recommend you also check this on ListView too, if you also see the same behavior, feel free to close this and leave more information at #120205 would be helpful for further investigation.

@huycozy huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 24, 2023
@delfme
Copy link
Author

delfme commented Feb 24, 2023

Which patch fix? As far as I know #120205 is pending.

In this gridView sample it looks like issue gets worse after resuming app from background state. So idk if the two issues are the same one

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 24, 2023
@delfme
Copy link
Author

delfme commented Feb 24, 2023

If it may help, I enabled Impeller for android. The animation looks smoother (although not smooth) but bigger janks still occur when resuming app from background.

IMG_7582.MOV

@delfme delfme changed the title [regression] Janky gridView on android [regression] Janky gridView on android and ios Impeller Feb 25, 2023
@delfme
Copy link
Author

delfme commented Feb 25, 2023

@huycozy just renamed this. Noticed we also have microjanks on ios with Impeller. Ofc less evident but still an issue.

@huycozy
Copy link
Member

huycozy commented Feb 27, 2023

Which patch fix? As far as I know #120205 is pending.

@delfme #120205 remains unresolved but already has a priority label (P4). Basically, if the issue is both scrolling and impeller related, we recommend tracking down only one issue so it can be resolved more neatly unless you see the jank difference between ListView and GridView.

Can you try enabling performanceOverlay and also attaching the timeline trace JSON file? You can find the instructions for it in this issue #74833.

@huycozy huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 27, 2023
@delfme
Copy link
Author

delfme commented Feb 27, 2023

Will try to do it, I have little time these days.

Wouldnt it be best if you guys checked scrolling on your internal sample app like Image Gallery and the likes?

I mean issues on janky scrolling can be detected instantly on your side. That would reduce issues filled by the community about core stuff, and we would report you only the unnoticed ones.

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 27, 2023
@delfme delfme changed the title [regression] Janky gridView on android and ios Impeller [regression] Janky gridView on android Feb 27, 2023
@delfme
Copy link
Author

delfme commented Feb 27, 2023

As requested, I filed a separate issue for Impeller #121525.
I'm sorry that I cannot help profile this better.

@huycozy
Copy link
Member

huycozy commented Feb 28, 2023

I updated your sample code a bit (use Image.network instead of CachedNetworkImage) and also see a lot of janks.
Running the reproduction in profile mode, on the latest stable and master channels.

Attaching timeline trace JSON here:
dart_devtools_2023-02-28_11_26_20.949.json.zip

Sample code (minimal without 3rd party plugins)
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);
  final List<String> items = List<String>.generate(62, (i) => '$i');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Janky scrolling issue'),
        ),
        body: Center(
          child: Padding(
            padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: GridView.builder(
                      itemCount: 250,
                      gridDelegate:
                          const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
                      itemBuilder: (BuildContext context, int index) =>
                          Image.network('https://loremflickr.com/100/100/music?lock=$index')),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
Demo video
Screen.Recording.2023-02-28.at.11.26.00.mov
flutter doctor -v (stable and master)
[✓] Flutter (Channel stable, 3.7.5, on macOS 13.0.1 22A400 darwin-x64, locale en-EE)
    • Flutter version 3.7.5 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c07f788888 (5 days ago), 2023-02-22 17:52:33 -0600
    • Engine revision 0f359063c4
    • Dart version 2.19.2
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Users/huynq/Library/Java/JavaVirtualMachines/corretto-1.8.0_302/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment Corretto-8.302.08.1 (build 1.8.0_302-b08)
    • All Android licenses accepted.

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

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version 2022.1)
    • Android Studio at /Applications/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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[!] Android Studio
    • Android Studio at /Users/huynq/Downloads/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.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.75.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.58.0

[✓] Connected device (3 available)
    • SM T225 (mobile) • R9JT3004VRJ • android-arm64  • Android 13 (API 33)
    • macOS (desktop)  • macos       • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome      • web-javascript • Google Chrome 110.0.5481.100

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

! Doctor found issues in 2 categories.
[!] Flutter (Channel master, 3.8.0-17.0.pre.39, on macOS 13.0.1 22A400 darwin-x64, locale en-EE)
    • Flutter version 3.8.0-17.0.pre.39 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 35f191576b (24 minutes ago), 2023-02-28 01:45:11 -0500
    • Engine revision 365f348645
    • Dart version 3.0.0 (build 3.0.0-277.0.dev)
    • DevTools version 2.22.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 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

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

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2022.1)
    • Android Studio at /Applications/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.15+0-b2043.56-8887301)

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.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.75.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.58.0

[✓] Connected device (3 available)
    • Pixel 3a (mobile) • 964AY0WL20 • android-arm64  • Android 12 (API 32)
    • macOS (desktop)   • macos      • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)      • chrome     • web-javascript • Google Chrome 110.0.5481.100

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.

@huycozy huycozy added engine flutter/engine repository. See also e: labels. c: performance Relates to speed or footprint issues (see "perf:" labels) a: images Loading, displaying, rendering images has reproducible steps The issue has been confirmed reproducible and is ready to work on found in release: 3.7 Found to occur in 3.7 found in release: 3.8 Found to occur in 3.8 framework flutter/packages/flutter repository. See also f: labels. f: scrolling Viewports, list views, slivers, etc. and removed in triage Presently being triaged by the triage team labels Feb 28, 2023
@delfme
Copy link
Author

delfme commented Feb 28, 2023

@huycozy thx for looking in this. As per @jonahwilliams request we are tracking the ios version of this in #121547.
It looks like issue and related fix differ accordingly to whether images are local or remote ones.

[edited] inside the repo we now have both versions #121547 (comment)

@goderbauer goderbauer added the P2 Important issues not at the top of the work list label Feb 28, 2023
@github-actions
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 22, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a: images Loading, displaying, rendering images c: performance Relates to speed or footprint issues (see "perf:" labels) engine flutter/engine repository. See also e: labels. f: scrolling Viewports, list views, slivers, etc. found in release: 3.7 Found to occur in 3.7 found in release: 3.8 Found to occur in 3.8 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants