WebView slows down list view when it appears in the list during scroll on iOS #136939

RubyRook · 2023-10-20T03:24:17Z

Steps to reproduce

List view is laggy when scroll is reach web content. It ok on android, but on iOS is laggy even web view just loadHtmlString only.

Code sample

class _MyHomePageState extends State<MyHomePage> {
  var item = [];

  Widget thisWidget(){
    return Container(
      color: Colors.grey.shade200,
      margin: const EdgeInsets.symmetric(vertical: 5,),
      child: const Center(
        child: Text("Widget"),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    final controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(Colors.orange)
      ..loadHtmlString("<h1>WebView</h1>");

    item = [
      thisWidget(),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      Container(
        margin: const EdgeInsets.symmetric(vertical: 5,),
        child: WebViewWidget(controller: controller),
      ),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      Container(
        margin: const EdgeInsets.symmetric(vertical: 5,),
        child: WebViewWidget(controller: controller),
      ),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      thisWidget(),
      thisWidget(),
    ];
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: GridView.builder(
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5,),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 1,
          childAspectRatio: 16/9,
        ),
        itemBuilder: (context, index) => item[index],
        itemCount: item.length,
      ),
    );
  }
}

Performance profiling on master channel

The issue still persists on the master channel

Timeline Traces

Timeline Traces JSON

[Paste the Timeline Traces here]

Video demonstration

14.pro.max.MP4

xs.max.MP4

What target platforms are you seeing this bug on?

iOS

OS/Browser name and version | Device information

iPhone Xs Max

iOS 17.0.3 21A360

iPhone 14 Pro Max

iOS 17.0.3 21A360

Does the problem occur on emulator/simulator as well as on physical devices?

Unknown

Is the problem only reproducible with Impeller?

N/A

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.13.8, on macOS 14.0 23A344 darwin-arm64, locale en-US)
    • Flutter version 3.13.8 on channel stable at /Users/sounniroth/development/flutter 3.13
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 6c4930c4ac (35 hours ago), 2023-10-18 10:57:55 -0500
    • Engine revision 767d8c75e8
    • Dart version 3.1.4
    • DevTools version 2.25.0

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/sounniroth/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A240d
    • CocoaPods version 1.12.1

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

[✓] Android Studio (version 2022.3)
    • 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 17.0.6+0-17.0.6b829.9-10027231)

[✓] VS Code (version 1.81.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (5 available)
    • KB2005 (mobile)               • adb-be11fd60-wzU6HF._adb-tls-connect._tcp. • android-arm64  • Android 13 (API 33)
    • Soun’s iPhone (mobile)        • 00008020-000609022606002E                  • ios            • iOS 17.0.3 21A360
    • Bunchhourng’s iPhone (mobile) • 00008120-0014684C02F3C01E                  • ios            • iOS 17.0.3 21A360
    • macOS (desktop)               • macos                                      • darwin-arm64   • macOS 14.0 23A344 darwin-arm64
    • Chrome (web)                  • chrome                                     • web-javascript • Google Chrome 118.0.5993.88

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

• No issues found!
Process finished with exit code 0

huycozy · 2023-10-20T09:19:14Z

Thanks for the report. I can reproduce this issue on my device iPhone 7, iOS 15.7.9.

I thought this could be a duplicate of #129632 but that issue is iPhone 12 onwards (works on iPhone 7).

Additional info

Complete sample project: ios_webview_scroll_slow_136939
The issue doesn't appear if using a pure platform view instead of Webview
When running sample code in profile mode, I see a few slow frames (janks) when Webview appears. Attaching Timeline trace JSON file here: dart_devtools_2023-10-20_16_02_16.098.json

Screen.Recording.2023-10-20.at.16.17.49.mov

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.13.8, on macOS 14.0 23A344 darwin-x64, locale en-VN)
    • Flutter version 3.13.8 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 6c4930c4ac (11 hours ago), 2023-10-18 10:57:55 -0500
    • Engine revision 767d8c75e8
    • Dart version 3.1.4
    • DevTools version 2.25.0

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio Giraffe.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A240d
    • CocoaPods version 1.13.0

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

[✓] Android Studio (version 2022.3)
    • Android Studio at /Applications/Android Studio Giraffe.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 17.0.6+0-17.0.6b829.9-10027231)

[✓] Android Studio (version 2022.2)
    • 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 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.0 23A344 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 118.0.5993.70

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

• No issues found!

[!] Flutter (Channel master, 3.16.0-14.0.pre.22, on macOS 14.0 23A344 darwin-x64, locale en-VN)
    • Flutter version 3.16.0-14.0.pre.22 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 07042fa27c (3 hours ago), 2023-10-19 20:16:27 -0400
    • Engine revision cc3356c0e6
    • Dart version 3.3.0 (build 3.3.0-45.0.dev)
    • DevTools version 2.28.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 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio Giraffe.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A240d
    • CocoaPods version 1.13.0

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

[✓] Android Studio (version 2022.3)
    • Android Studio at /Applications/Android Studio Giraffe.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 17.0.6+0-17.0.6b829.9-10027231)

[✓] Android Studio (version 2022.2)
    • 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 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (5 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D                         • android-arm64  • Android 11 (API 30)
    • iPad (mobile)    • 00008103-000A1464346A201E                • ios            • iOS 17.0.3 21A360
    • iPhone (mobile)  • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.7.9 19H365
    • macOS (desktop)  • macos                                    • darwin-x64     • macOS 14.0 23A344 darwin-x64
    • Chrome (web)     • chrome                                   • web-javascript • Google Chrome 118.0.5993.96

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

! Doctor found issues in 1 category.

MitchellGoodwin · 2023-10-23T19:18:04Z

Maybe a duplicate of general performance issues with platform views.

RubyRook added the from: performance template Issues created via a performance issue template label Oct 20, 2023

darshankawar removed the from: performance template Issues created via a performance issue template label Oct 20, 2023

huycozy added the in triage Presently being triaged by the triage team label Oct 20, 2023

huycozy changed the title ~~web view slow down list view when it appear in the list during scroll on iOS~~ WebView slows down list view when it appears in the list during scroll on iOS Oct 20, 2023

MitchellGoodwin added P2 Important issues not at the top of the work list triaged-ios Triaged by iOS platform team a: platform-views Embedding Android/iOS views in Flutter apps labels Oct 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WebView slows down list view when it appears in the list during scroll on iOS #136939

WebView slows down list view when it appears in the list during scroll on iOS #136939

RubyRook commented Oct 20, 2023

huycozy commented Oct 20, 2023

MitchellGoodwin commented Oct 23, 2023

WebView slows down list view when it appears in the list during scroll on iOS #136939

WebView slows down list view when it appears in the list during scroll on iOS #136939

Comments

RubyRook commented Oct 20, 2023

Steps to reproduce

Code sample

Performance profiling on master channel

Timeline Traces

Video demonstration

What target platforms are you seeing this bug on?

OS/Browser name and version | Device information

Does the problem occur on emulator/simulator as well as on physical devices?

Is the problem only reproducible with Impeller?

Logs

Flutter Doctor output

huycozy commented Oct 20, 2023

Additional info

MitchellGoodwin commented Oct 23, 2023