capacitor: bug: Android - Performance issue after scrolling
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 | |
 |
 |
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 11
- Comments: 35 (2 by maintainers)
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?
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 …
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.
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.
@falkenhawk In mi a2(snapdragon 660), lg v35(snapdragon 845), performnce bad😣
surely!
I have the same problem with my app. Transactions are a mess on Android.
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.
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
Motorola G6 (XT1925-5) Android 8.0.0. Pretty jerky. 🐢
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.
We are also experiencing issues on Android which are not present on iOS or web.
@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.