bug: Android - Performance issue after scrolling

[AE1NS]

Bug Report

Capacitor Version

Latest Dependencies:

  @capacitor/cli: 2.4.6
  @capacitor/core: 2.4.6
  @capacitor/android: 2.4.6
  @capacitor/electron: 2.4.6
  @capacitor/ios: 2.4.6

Installed Dependencies:

  @capacitor/ios not installed
  @capacitor/cli 2.4.6
  @capacitor/android 2.4.6
  @capacitor/core 2.4.6
  @capacitor/electron not installed

[success] Android looking great!

Platform(s)

Android

Framework(s)

Angular, Ionic

Current Behavior

When you open the app in Android and don't scroll, you can open a page and return back with fluid transitions. When you just scroll around a bit and open the page again und go back, the transition isn't as fluid as in the beginning.

Expected Behavior

Always fluid navigation transitions.

Code Reproduction

Starter project with two demo pages. The home page contains some sliders and another test page has just red background to better demonstrate the issue. https://github.com/AE1NS/android-performance-issue

Other Technical Details

npm --version output: 6.14.8 node --version output: v13.8.0

Tested on: Samsung Galaxy S7 edge

Additional Context

In a more complex application we have significant performance issues with Android as also described here: https://github.com/ionic-team/capacitor/discussions/3899

Visual example

You will see it more clear on a real device, as in the low frames gif below.	Without scrolling	After scrolling
Example project
Productive project

[lincolnthree]

We are also experiencing slow app performance on Android Capacitor. The exact same app & code deployed and installed through chrome as a PWA is buttery smooth. When installed as a native android app with Capacitor 3, there are laggy/jittery transitions, animations, etc. We are still trying to find the root cause, but so far nothing has revealed itself.

[lincolnthree]

@AE1NS Try setting android:largeHeap="true" in your AndroidManifest.xml - Does that make any difference for you? It seemed to make an improvement for us. We also added android:immersive="true" (fits our app) and android:hardwareAccelerated="true" (defaults to true, but... just in case.)

https://developer.android.com/guide/topics/manifest/application-element#largeHeap

[lincolnthree]

Also try setting android:hardwareAccelerated on the MainActivity

<activity android:configChanges="keyboardHidden|keyboard|locale|orientation|screenLayout|screenSize|smallestScreenSize|uiMode" android:name="com.maritlabs.topdecked.mtg.MainActivity" android:label="@string/title_activity_main" android:theme="@style/AppTheme.NoActionBarLaunch" android:launchMode="singleTask" android:hardwareAccelerated="true">

(this defaults to false, afaik)

https://developer.android.com/guide/topics/manifest/activity-element#hwaccel

[AE1NS]

I tried out your approaches but it does not fixed the issue.

[lincolnthree]

@AE1NS Alas, we initially saw an improvement, but after a few more days of testing it has not solved our issue either :( There is something else going on.

[antonioberetini]

We are also experiencing issues on Android which are not present on iOS or web.

[lincolnthree]

After months of testing, I can only say that there is a definitely performance degradation when using Capacitor vs. native Chrome on the same device. I do not know why. This is reproducible. It may not be something typical people experience because their apps are too "simple", but the repro clearly demonstrates the issue. Our users have also reported that switching to our PWA has improved their experience.

[antonioberetini]

This may also be related to the web view differences between web view and chrome itself. If this is the cause this is out of control of Capacitors team.

Get Outlook for iOShttps://aka.ms/o0ukef

---

From: Lincoln Baxter, III @.> Sent: Friday, May 7, 2021 8:59:27 AM To: ionic-team/capacitor @.> Cc: Tony Beretini @.>; Comment @.> Subject: Re: [ionic-team/capacitor] bug: Android - Performance issue after scrolling (#4187)

After months of testing, I can only say that there is a definitely performance degradation when using Capacitor vs. native Chrome. I do not know why. This is reproducible. It may not be something typical people experience because their apps are too "simple", but the repro clearly demonstrates the issue. Our users have also reported that switching to our PWA has improved their experience.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/ionic-team/capacitor/issues/4187#issuecomment-834422909, or unsubscribehttps://github.com/notifications/unsubscribe-auth/APUUMIFWHV3BTSQQFP2QKJTTMPW37ANCNFSM4XMPBIDA.

[thequailman]

Venting my frustration here--I had a TWA on Google Play but there isnt a way to do IAP with a TWA per Google's requirement, so I had to switch to Capacitor. The TWA was blazing fast compared to WebView, but due to Google's payment ~monopoly~ requirement my users have to suffer.

I found this StackOverflow that has some options, I'm not sure how to add them without breaking capacitor though:

https://stackoverflow.com/questions/7422427/android-webview-slow

[AE1NS]

Just another example of performance issue without scrolling, running on a Samsung Galaxy S20+.

Web version (Fullscreen Chrome, started from shortcut on home screen) (Chrome 90.0.4430.210):

https://user-images.githubusercontent.com/47378799/119254196-48377200-bbb5-11eb-9664-9d93e4a23d45.mp4

Android version (Android System WebView 90.0.4430.210):

https://user-images.githubusercontent.com/47378799/119254201-4ff71680-bbb5-11eb-927b-6bb355a29863.mp4

On iOS its also running fine, same as in the web version. Just Android makes trouble.

[thomasvidas]

A couple things,

1. I can't get your repro to work on my machine with a couple of different node or npm versions I've tried. Can you update your repro to work with node 14 or 16 with npm 7? The angular devkit version is giving me problems on install.

2. Can you go into the Android Developer options and force Chrome instead of the system webview? Or try the beta or canary web view implementations (installed via play store)? You could also try using Firefox, Brave, or some other browser engine rather than the system webview too via the same "Developer Options" setting

[lincolnthree]

@thomasvidas

Can you go into the Android Developer options and force Chrome instead of the system webview?

Is that something we could prompt users to do programatically? Or something we could opt-in to in the Capacitor config somehow?

[AE1NS]

1. I updated the repository and can run it with node 14.17.0 and npm 7.14.0.
2. I cant change this value on my Galaxy S20+. Its the only entry in the list, although Firefox is installed. But this cant be a solution, because the users will not change any version in the developer mode of their devices. Btw: On the Galaxy S7 edge (mentioned in the first thread, please test the repository on an older device like this to see the issue clearly) I have two entries in the list, a disabled "Android System Webview" entry and a selected "Chrome" entry.

[thomasvidas]

Thanks for updating your repo, I'll get around to testing it when I get a chance. My intent was to ask you if you saw a performance change when switching between browser engines on Android, not for your users to do so. I would not ask a user "hey go into this developer setting and change this setting." I have an old LG G6 lying around somewhere which is probably similar spec wise to the Samsung S7 so I will use that to test.

@lincolnthree You could probably prompt them to go to developer settings with a clever Android Intent but that would be terrible UX, require them to have other webviews installed, and might get you flagged by Google Play

[lincolnthree]

@thomasvidas Makes sense. I figured I'd ask. Definitely do not want to send users down that path, but if it could be requested at the app-level, would have been something.

Also FWIW, on the Google Pixel 2 XL, I do not have any other choice in the menu. Only "Android System WebView" (version 90.0.xxxx)

[lincolnthree]

@thomasvidas Makes sense. I figured I'd ask. Definitely do not want to send users down that path, but if it could be requested at the app-level, would have been something.

Also FWIW, on the Google Pixel 2 XL, I do not have any other choice in the menu. Only "Android System WebView" (version 90.0.xxxx)

[antonioberetini]

1. I updated the repository and can run it with node 14.17.0 and npm 7.14.0.
2. I cant change this value on my Galaxy S20+. Its the only entry in the list, although Firefox is installed. But this cant be a solution, because the users will not change any version in the developer mode of their devices. Btw: On the Galaxy S7 edge (mentioned in the first thread, please test the repository on an older device like this to see the issue clearly) I have two entries in the list, a disabled "Android System Webview" entry and a selected "Chrome" entry.

I am not sure I get what the end goal is. WebView on Android is sluggish. Using standalone Chrome standalone mode to me is a better approach but that would mean loosing some of the system API access. Am i reading this wrong?

[AE1NS]

I do not understand your question if its addressed to me :)

[AE1NS]

@thomasvidas Did you investigate it yet?

[AE1NS]

Well, I was really happy to be heard by the dev team. Now another month is gone and we still got no response to the topic.

[madmacc]

I am having the same issues. For me the animation is smooth if I use pure html as a test but if I add conditional html and styles in Ionic/Angular (*ngIf) is really starts to slow down. However this only seems to be part of the picture. It would be great to have a solution for this or at least an answer.

[madmacc]

I think a lot of Ionic users will start to have this issue as ion-slides has been deprecated and developers will now have to use Swiper.js directly which is what I am having the issues with.

[AE1NS]

I intentionally created the reproduction repository in this ticket with a minimal set of code. There is no ion-slides/js swiper, but just a horizontal html scrolling. The issue could be the fontawesome icons, but I am not sure what exactly is causing the performance issue.

If this issue would be fixed (somehow), I would break down our code again if there is still an existing performance issue. Maybe the slider would cause the next performance problem here, but I am not at the point right now to confirm this.

It would be a great thing, if all this problems are caused by a single fixable chromium bug, but it seems to me that its not as easy as it looks ... I think we can only get ahead with the help of competent developers, that can investigate/debug this on some deeper level.

[AE1NS]

I just used the LiveReload feature to run the app with reference to my machine. Inside the chrome browser (most recent stable), I also opened the application.

Inside the browser the app is running flawless without any problems, but inside the webview I get always huge frame drops on my Galaxy S20 (and also on a Galaxy S7 edge). (Btw: I also used the Angular dev tools profiler, and we dont have any change detection issues.). I especially see the frame drops while the ionic page animations.

When I run the app on a Pixel 4 or a 3 year old Motorola, the app is running fine. This seems to be a problem with Samsung devices. The S20 uses the same webview implementation (I see this inside the dev options in the settings) as the chrome browser. Its the latest version. Android System WebView 94.0.4606.61

Update: I installed the Android System WebView Beta and I have the same problems in 94.0.4638.16. Then I uninstalled the Android System WebView from the play store. Now with 83.0.4103.106 its running flawless ...

[fabmesto]

I have the same problem with my app. Transactions are a mess on Android.

[mitschmidt]

My team and I were having the same issues with performance on Android, while iOS was really smooth even on older devices.

We figured this was due to resources (i.e. number of DOM nodes) in combination with animations, my colleague @derbenoo found an elegant solution for our App. We plan to share our insights on our blog in the future, would that be interesting for anybody?

[fabmesto]

My team and I were having the same issues with performance on Android, while iOS was really smooth even on older devices.

We figured this was due to resources (i.e. number of DOM nodes) in combination with animations, my colleague @derbenoo found an elegant solution for our App. We plan to share our insights on our blog in the future, would that be interesting for anybody?

surely!

[falkenhawk]

I found out our app is sluggish on an android device with "MediaTek Helio P90" CPU, but not on other devices with other non-mediatek CPUs. What CPUs are inside your android devices where you find the performance bad?

[skout90]

@falkenhawk In mi a2(snapdragon 660), lg v35(snapdragon 845), performnce bad😣

[AE1NS]

I think the S7 edge has an Exynos 8890 and the S20+ an Exynos 990 here in germany.

@mitschmidt did you try to run the app on the same device inside the chrome browser? Is running flawless then? I have no problems on any device inside the chrome browser. Its always just the webview thats causing our issues.

[madmacc]

Motorola G6 (XT1925-5) Android 8.0.0. Pretty jerky. 🐢

[maxcodefaster]

Also experiencing performance problems with ionic page transitions on webview android on a Pixel 5. In chrome browser on Android the App works snappy. Same goes for iOS. Hardware acceleration is turned on by default. Best practices are applied. Heavy dom writes are avoided. Seems to be a capacitor issue.

[AE1NS]

I think this issue depends to the webview implementation and the capacitor team cant do anything right now, because they are using the native webview without any special configuration.

@lincolnthree thank you for creating the issue in the chromium bug tracker https://bugs.chromium.org/p/chromium/issues/detail?id=1289741 In my understanding, this is the correct place right now, where it "could" be fixable.

I found out, that the password manager LastPass was causing the issue in my case. When I go to "Settings > Accessibility > Installed apps" and disable LastPass there, the app and its transitions are running well again.

Also the issues on my S7 edge are gone, after uninstalling some apps on my test device (old private device). But I cant tell you which app caused the issue.

So in general it could be just accessibility tools, that are blocking the UI thread or something, thats causing our issue. Unfortunately the chromium developers confirmed the following: "In general you should not expect WebView to perform equivalently to Chrome. That doesn't mean there isn't an issue in this case, but Chrome and WebView use different rendering paths and have other important configuration differences that can result in slower performance in WebView." It would be more helpful for such great frameworks like capacitor, to not have that kind of limitations, but thats the state of things right now.

Therefore I will close this ticket. Thank you for all your participation to get closer to a solution.

[visuallization]

@AE1NS thanks for digging into this! Would be really cool if android manage to fix it's webview rendering implementation (or if capactior goes with a different solution)

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.