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

Platform-View List / Grid scrolling is janky on IOS / Android #107486

Closed
Nico3652 opened this issue Jul 12, 2022 · 36 comments · Fixed by flutter/engine#37434
Closed

Platform-View List / Grid scrolling is janky on IOS / Android #107486

Nico3652 opened this issue Jul 12, 2022 · 36 comments · Fixed by flutter/engine#37434
Assignees
Labels
a: platform-views Embedding Android/iOS views in Flutter apps c: performance Relates to speed or footprint issues (see "perf:" labels) c: rendering UI glitches reported at the engine/skia rendering level engine flutter/engine repository. See also e: labels. f: scrolling Viewports, list views, slivers, etc. found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 P1 High-priority issues at the top of the work list platform-ios iOS applications specifically

Comments

@Nico3652
Copy link

Nico3652 commented Jul 12, 2022

My team and I are facing troubles for a while trying to implements native views inside scrollable content in our App.

The real problem here is that the Platform View rendering is very heavy and as a consequence the scrolling animation make it visible on screen by lag / freezing the UI.
So when native views are placed into ListView / GridView, the entire screen start to freeze because of performance.

Here are 2 videos to illustrate my words. A simple ListView with widgets inside.
The first contain Flutter widgets and the second Native views.

FLUTTER :

Flutter NATIVE (IOS)
Simulator.Screen.Recording.-.iPhone.12.Pro.Max.-.2022-07-12.at.20.25.20.mp4
Simulator.Screen.Recording.-.iPhone.12.Pro.Max.-.2022-07-12.at.20.26.00.mp4

This is a completely empty App so the freezing could may be not very pronounced here but a simple app with common content (ex: users/photos) is much more impacting.

It was record on IOS but clearly tested on Android too and the problem still persist.

Our App is a full social media (photo / video / story) and when we are trying to add native view inside lists, this app quickly become unusable.

Here are linked issues #96679 (which should not be closed)


GOOGLE ADS SDK

Also currently trying to provide Ads into our Social Media app between photo and videos lists, the performance issue is even worse than the recorded example here while scrolling or animating other components.

ADS are provided with Platform View so the problem is remaining once again here, and this is very restrictive for us because we can not go in production version without ADS and native view because of business model.

Linked issues :

googleads/googleads-mobile-flutter#269
googleads/googleads-mobile-flutter#313


This issue should have a high priority level taking into account the huge impact for company or developers teams into their app.

Thank you.

-- FULL CODE --

https://github.com/Nico3652/native_view_project

-- FLUTTER DOCTOR --

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.4, on macOS 12.4 21F79 darwin-x64, locale
    fr-FR)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.65.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!
@b3nni97
Copy link

b3nni97 commented Jul 13, 2022

I have the same problem #103014

@euphio
Copy link

euphio commented Jul 13, 2022

+1 Also experiencing this issue and require the exact same use case as described above.

@maheshj01 maheshj01 added the in triage Presently being triaged by the triage team label Jul 13, 2022
@maheshj01
Copy link
Member

Hi @Nico3652, Thanks for filing the issue. Could you please share a minimal and complete sample project so that we could directly run the sample app? Also there have been recent updates to platform views, So I would suggest checking the performance on the latest master channel by running

flutter channel master
flutter upgrade

@maheshj01 maheshj01 added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jul 13, 2022
@Nico3652
Copy link
Author

Hello @maheshmnj and thanks for reply. I've updated my issue with the link of the sample app containing the full code which you can clone.

I tried the channel master but the problem is still present unfortunately.

@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 Jul 13, 2022
@maheshj01
Copy link
Member

maheshj01 commented Jul 14, 2022

Thanks for the code sample @Nico3652, I do see the lag on the master channel too, But I believe this is the same issue as #103014 which uses Native ads using platformview. So I think we can track it as a duplicate?

Screen.Recording.2022-07-14.at.11.25.54.AM.mov
flutter doctor -v (mac)
[✓] Flutter (Channel stable, 3.0.4, on macOS 12.4 21F79 darwin-arm, locale en-IN)
    • Flutter version 3.0.4 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 85684f9300 (4 days ago), 2022-06-30 13:22:47 -0700
    • Engine revision 6ba2af10bb
    • Dart version 2.17.5
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

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

[✓] Android Studio (version 2021.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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • sdk gphone arm64 (mobile) • emulator-5554 • android-arm64  • Android 11 (API 30) (emulator)
    • macOS (desktop)           • macos         • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)              • chrome        • web-javascript • Google Chrome 103.0.5060.53

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

• No issues found!
[✓] Flutter (Channel master, 3.1.0-0.0.pre.1594, on macOS 12.4 21F79 darwin-arm, locale en-IN)
    • Flutter version 3.1.0-0.0.pre.1594 on channel master at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 082ad11422 (2 days ago), 2022-07-11 11:40:07 +0200
    • Engine revision 2b5d5c3b2d
    • Dart version 2.18.0 (build 2.18.0-271.0.dev)
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    • CocoaPods version 1.11.2

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

[✓] Android Studio (version 2021.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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • Redmi K20 Pro (mobile) • 192.168.1.2:5555 • android-arm64  • Android 11 (API 30)
    • macOS (desktop)        • macos            • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)           • chrome           • web-javascript • Google Chrome 103.0.5060.114

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

• No issues found!

@maheshj01 maheshj01 added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jul 14, 2022
@Nico3652
Copy link
Author

Nico3652 commented Jul 14, 2022

This issue is focused on the platform view performance impact in its generality and not only for the Native ads SDK.
The goal here is to display any native views in flutter with the same performances than other flutter widgets.

Solve the platform view issue will certainly also solve the ads performance but I'm not sure the other way around.
If the google_ads_sdk is improved or workarounded one way or another without fixing the platform view render, #103014 could be closed, then this issue should remain.

@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 Jul 14, 2022
@euphio
Copy link

euphio commented Jul 14, 2022

Agreed, the Native ad issue appears to be a symptom of this more general performance problem, not the other way around.

@maheshj01
Copy link
Member

Thanks for the clarification @Nico3652, Labeling it as a platformview performance issue on IOS. Perhaps for Android, we should track it separately. Sample project can be found here native_view_project.zip

flutter Platformview
Screen.Recording.2022-07-14.at.11.26.22.AM.mov
Screen.Recording.2022-07-14.at.11.25.54.AM.mov
flutter doctor -v (mac)
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-arm, locale en-IN)
    • Flutter version 3.0.5 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (16 hours ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

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

[✓] Android Studio (version 2021.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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • C217DCBE-806E-4BC7-A952-61E4A647A7DA • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 103.0.5060.114

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

• No issues found!
[✓] Flutter (Channel master, 3.1.0-0.0.pre.1594, on macOS 12.4 21F79 darwin-arm, locale en-IN)
    • Flutter version 3.1.0-0.0.pre.1594 on channel master at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 082ad11422 (3 days ago), 2022-07-11 11:40:07 +0200
    • Engine revision 2b5d5c3b2d
    • Dart version 2.18.0 (build 2.18.0-271.0.dev)
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    • CocoaPods version 1.11.2

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

[✓] Android Studio (version 2021.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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • C217DCBE-806E-4BC7-A952-61E4A647A7DA • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 103.0.5060.114

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

• No issues found!

@maheshj01 maheshj01 added platform-ios iOS applications specifically engine flutter/engine repository. See also e: labels. c: performance Relates to speed or footprint issues (see "perf:" labels) f: scrolling Viewports, list views, slivers, etc. a: platform-views Embedding Android/iOS views in Flutter apps c: rendering UI glitches reported at the engine/skia rendering level found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 and removed in triage Presently being triaged by the triage team labels Jul 14, 2022
@maheshj01 maheshj01 changed the title Platform-View (Native view) in List / Grid is unusable because of performance issues IOS / Android Platform-View List / Grid scrolling is janky on IOS Jul 14, 2022
@jmagman
Copy link
Member

jmagman commented Jul 14, 2022

@cyanglaz do we have any benchmarks for this?

@cyanglaz
Copy link
Contributor

@chinmaygarde chinmaygarde added the P2 Important issues not at the top of the work list label Jul 18, 2022
@Tom3652
Copy link

Tom3652 commented Jul 19, 2022

This issue is preventing me from going in production unfortunately

@cyanglaz
Copy link
Contributor

@Tom3652 iOS PlatformView requires all flutter compositing happen on the main thread, which slows down the performances, especially when there are many platform views in a scroll view.
See: https://docs.flutter.dev/development/platform-integration/ios/platform-views?tab=ios-platform-views-objective-c-tab#performance

May I ask what content are you trying to display as PlatformViews? Is there a way to make them non-platformView flutter widgets?

@b3nni97
Copy link

b3nni97 commented Jul 19, 2022

@cyanglaz One use case that concerns me is the display of ads that run entirely through Platform Views and not through Flutter Widgets.

@Nico3652 Nico3652 changed the title Platform-View List / Grid scrolling is janky on IOS Platform-View List / Grid scrolling is janky on IOS / Android Jul 20, 2022
@euphio
Copy link

euphio commented Jul 20, 2022

My use case is essentially identical to that of @Tom3652 - Native Google Ads in a stream of content, although I can imagine there would be requirements for other native views in such a feed.

@naamapps
Copy link

Hey guys,
Adding to all of the previous comments,
The ideal solution will be not using PlatformViews at all when possible, however, the implementations of all the critical packages (ads in particular) are using platform views.

The Android platform views are fixed to a degree.
In iOS the situation is far worse.

I think the Flutter teams should really prioritize these issues. Most of the attention now are given to expanding flutter to more platforms (web, desktop), even when the initial platforms (iOS, Android) are not perfectly executed unfortunately.

Hope we can see a solution in the near future.
Thank you.

@iosephmagno

This comment was marked as off-topic.

@iosephmagno

This comment was marked as off-topic.

@iosephmagno

This comment was marked as off-topic.

@jmagman
Copy link
Member

jmagman commented Sep 1, 2022

iOS doesn't have a native support for displaying content in UIView in a texture, so a similar approach like Android is impossible on iOS.

We should revisit the iOS PlatformView's performance at some point to see if we can increase the performance within the current threading model for PlatformVIews.

Let's keep conversation focused on the performance issues related to platform view threading model on iOS. Please avoid adding noise to GitHub issues.

@iosephmagno

This comment was marked as off-topic.

@jmagman

This comment was marked as off-topic.

@Hixie

This comment was marked as off-topic.

@0xZOne
Copy link
Member

0xZOne commented Oct 26, 2022

I have a similar problem too. #114010

The difference is that on non-ProMotion devices (e.g., iphone8) it's smooth with barely perceptible jitter. However, there is noticeable jitter on the ProMotion device (e.g., iPhone13 Pro Max).

@cyanglaz Here it seems to be more than just platform view performance issues.

@0xZOne
Copy link
Member

0xZOne commented Oct 27, 2022

I have a similar problem too. #114010

The difference is that on non-ProMotion devices (e.g., iphone8) it's smooth with barely perceptible jitter. However, there is noticeable jitter on the ProMotion device (e.g., iPhone13 Pro Max).

@cyanglaz Here it seems to be more than just platform view performance issues.

iPhone 8

iphone13_pro_max_2022-10-27 10 56 00

iPhone 13 Pro Max

iphone8_2022-10-27 11 12 13

Actually, non-ProMotion devices will also experience jitter, but not as visible to the naked eye as ProMotion devices.

flutter doctor -v
[✓] Flutter (Channel stable, 3.3.5, on macOS 12.6 21G115 darwin-x64, locale zh-Hans-CN)
    • Flutter version 3.3.5 on channel stable at /Users/zero/fvm/versions/3.3.5
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d9111f6402 (7 days ago), 2022-10-19 12:27:13 -0700
    • Engine revision 3ad69d7be3
    • Dart version 2.18.2
    • DevTools version 2.15.0
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc1)
    • Android SDK at /Users/zero/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc1
    • ANDROID_HOME = /Users/zero/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)
    • All Android licenses accepted.

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

[✓] Android Studio (version 2021.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.11+0-b60-7590822)

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

[✓] Connected device (2 available)
    • 艾尔玛的iPhone (2) (mobile) • 00008110-001A30960238401E • ios        • iOS 15.5 19F77
    • macOS (desktop)         • macos                     • darwin-x64 • macOS 12.6 21G115 darwin-x64

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

• No issues found!

@stuartmorgan
Copy link
Contributor

Capturing from offline discussion: the two main potential sources of perf issues here are:

  • thread merging, as discussed above, and
  • frequent creation and destruction of platform views as they scroll through.

As a next step here, we should compare perf of the scroll-lots-of-native-views test in the original report to scrolling the same list with just widgets, but with a platform view persistently on the screen, to isolate just the thread-merging part, to see to what extent each contributes to the issue.

@cyanglaz
Copy link
Contributor

cyanglaz commented Nov 4, 2022

Performance comparison between multiple scenarios with iPhone 13 pro, with Flutter dev tools:

  1. No PlatformView while scrolling:

no platform view dart

  1. One PlatformView, with the PlatformView stationary and non-flutter widgets scrolling. (Thread merging)

one platform view

2* 5 PlatformViews, with the PlatformViews stationary

5 PlatformView not scrolling

  1. **One PlatformView, with the PlatformView constantly animating. **

one platform view scrolling half out of the screen

  1. 5 PlatformViews in the list, no creation destruction during scrolling (This also matches the max number of PlatformView on the screen in the next scenario

5 platform view , no alloc deallc

4*. 30 PlatformViews in the list, no creation destruction during scrolling.

30 PlatformView animating

  1. Multiple PlatformView scrolling (the scenario in this issue)

all platform view dart

My observations:

  1. Thread merging does reduce the performance, about 2ms per frame. (comparing scenario 1 and 2) This is expected.
  2. One PlatformView animating its position reduces performance further more. (comparing scenario 2 and 3)
  3. Animating the position of multiple PlatformViews with no creations and destructions reduces performance. (comparing scenario 3 and 4)
  4. PlatformView creation and destruction doesn't seem to contribute to the performance reduction much. (comparing scenario 4 and 5)
  5. The more the PlatformView animating, the worse the performance. (comparing 4 and 4*)
  6. Number of the stationary PlatformView on the screen doesn't seem to affect performance (comparing 2 and 2*)

In summary, 2 things are happening that contributes the performance reduction.

  1. Thread merging. This is expected and I'm not sure what we can do about it unless completely changing the threading model. The reduction is not much tho. I could not observe any janks when only 1 platform view is on the screen.
  2. Numbers of the PlatformView constantly animating. It looks like the more PlatformView that are animating, the worse the screen jank is. There might be something we can do here.

The next step would be to find where in PlatformView's code takes long time during animation. My gut says it is either ApplyMutator is slow, or unnecessary overlays are created in SubmitFrame

@cyanglaz
Copy link
Contributor

cyanglaz commented Nov 7, 2022

I found that setting the maskView is one of the bottlenecks that lowering down the performance, here

I have tried removing all the clipping logic and just setting the maskView, the performance is still as bad.

Plain mask view no clipping
Just mask view, no clip

No mask view
no mask view

Masking is the probably the best way that I could find to clip a UIView. I'm not sure if we can avoid masking if we want to support clipping.

One thing that we might be able to optimize is to pre-calculate the final clip path for the PlatformView, check if the PlatformView's frame is completely inside the final clip path, and do not set the mask view if that is the case.
I think this is the case for the example app, the clip rect in the example is basically the entire section below the navigation bar and all the PlatformViews never really need to be clipped.

I will start prototype this and see if it increases performance. I believe (and hopefully) it will enhance performance for regular scrolling scenarios. Although it won't help if the App wants to do fancy clippings while scrolling. (For example, adding a clipRRect for each PlatformView in the ListView)

@cyanglaz
Copy link
Contributor

cyanglaz commented Nov 9, 2022

The draft is ready at flutter/engine#37434. I have tested the performance with flutter dev tools it seems to have a significant performance increase while using the example app.

It would be great If anyone else can verify if it fixes the visual janks for their app.

@cyanglaz cyanglaz self-assigned this Nov 14, 2022
@cyanglaz cyanglaz added P1 High-priority issues at the top of the work list and removed P2 Important issues not at the top of the work list labels Nov 14, 2022
@0xZOne
Copy link
Member

0xZOne commented Nov 16, 2022

@cyanglaz

Frame stuttering in PlatformView is far less noticeable on non-ProMotion devices than on ProMotion devices.

It might be a not-bad optimization option if we could lower the refresh rate to 60Hz for pages containing PlatformView. :)

@Tom3652
Copy link

Tom3652 commented Nov 16, 2022

Hi @cyanglaz and thanks for working on this !

I am sorry but i am not sure on how to proceed to test your draft ? I would like to

@0xZOne
Copy link
Member

0xZOne commented Nov 16, 2022

Hi @cyanglaz and thanks for working on this !

I am sorry but i am not sure on how to proceed to test your draft ? I would like to

You can compile a local engine with @cyanglaz's patch (see https://github.com/flutter/flutter/wiki/Compiling-the-engine for details).

Working from home due to COVID-19, I only have an iPhone 8, no ProMotion device. Since the iPhone 8 has no noticeable stutter even without the patch, I can't verify that well either.

@0xZOne
Copy link
Member

0xZOne commented Dec 2, 2022

@cyanglaz

Frame stuttering in PlatformView is far less noticeable on non-ProMotion devices than on ProMotion devices.

It might be a not-bad optimization option if we could lower the refresh rate to 60Hz for pages containing PlatformView. :)

I mean rendering at a refresh rate depending on the context of what is being rendered. See #90675 (comment) for more details.

@cyanglaz @iskakaushik Do you guys have further plans? :)

@github-actions
Copy link

github-actions bot commented Mar 5, 2023

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 5, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a: platform-views Embedding Android/iOS views in Flutter apps c: performance Relates to speed or footprint issues (see "perf:" labels) c: rendering UI glitches reported at the engine/skia rendering level engine flutter/engine repository. See also e: labels. f: scrolling Viewports, list views, slivers, etc. found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 P1 High-priority issues at the top of the work list platform-ios iOS applications specifically
Projects
None yet
Development

Successfully merging a pull request may close this issue.