Replies: 48 comments 92 replies
-
The WebView on Android seems to be given less CPU and GPU power than the Google Chrome app itself. I noted this on different web apps. This is primarily the case with long scrollable views with lots of box-shadow and other GPU heavy css styles. This has been a thing for years. I have to say that I am experiencing it less and less every day. Maybe because our devices are getting faster or because we are (unwittingly maybe) taking this GPU bottleneck into consideration when designing stuff for Android. There are dozens of StackOverflow questions about this:
But it is not al bad, because as I mentioned before, it seems to be less and less of an issue everyday. So it can only get better from now on. That said, our app starts within a couple of seconds and sometimes performs (much) better than on iOS. So it is probably a combination of: slow Angular code (which Angular is known for), less GPU power on Android and a lot of GPU heavy CSS styles. |
Beta Was this translation helpful? Give feedback.
-
flutter/flutter#52211 maybe the same issue but fixed? "fast on iOS, fast on Android browser, slow in Android WebView". He is also on a Galaxy device. I am not sure if this issue relates to Samsung devices. |
Beta Was this translation helpful? Give feedback.
-
I still did not find any reason why our app runs slow on Android, but superfast on iOS + desktop browser. There is one strange behaviour I noticed: When I open the app, navigate to another page and press back, the transition animation is fluid. I can also repeat this and it stays fluid. As soon as I scroll one time on the start page in any direction, no matter if vertical through the ion-content or through the horizintal sliders (build with css scroll snap, no JS), the back transition from any page is stuttering and delayed. I also replaced the ion-content with an overflow:auto div with no success. What is happening in Ionic/Capacitor/Android when I leave a page, that could cause this stutterung? There is no scroll/touch listener on my side. The ChangeDetection is handled correctly. All observables are unsubscribed when a component gets destroyed. I thought the page transition would:
So I dont understand the cause of this stuttering. I do not have this behavior in any way on the desktop version nor the iPhone. |
Beta Was this translation helpful? Give feedback.
-
We are experiencing a similar issue with capacitor/webview on android. We build a custom Slider which animates really smooth on IOS and desktop but has significant frame drops on android. |
Beta Was this translation helpful? Give feedback.
-
I'm working for years with Cordova, this time I decided to use Capacitor and I'm sad with the Android performance :( I thought stuttering of sliders had to be left and forgotten in 2014. Currently, on Cordova + Android it works much better. I found very comfortable and useful approach with native projects, which can be updated directly from Xcode/Android studio, but this stuttering is something terrible. I don't know what to do, migrate to Cordova or I can expect some fix ? |
Beta Was this translation helpful? Give feedback.
-
I created a bug ticket and hope it helps to solve this issue. |
Beta Was this translation helpful? Give feedback.
-
@AE1NS Have you noticed any difference between "Signed" vs "Un-Signed" apps? For us, the un-signed app performs better. We're trying to figure out if it has something to do with In-App Billing (since that doesn't run in Un-Signed apps.) |
Beta Was this translation helpful? Give feedback.
-
Last month I worked on Vue app with plan to use Capacitor. I really like the concept, documentation is good too. We finished with development. App we built work flawless on web inside browser, but then when we create an Android bundle with Capacitor we were disappointed with animation and page to page transition performance. We tweaked app in order to gain performance, we removed opacity, box-shadows, we even hide some content during transitions, use low res images, use only CSS GPU animations and so on... It was better, but still not as near as it is on web (desktop, or even Chrome mobile was running perfectly smooth). We decided then to try same app (with optimized animation above) with Cordova, everything remains same, we just used Cordova, the result was that animation performance was significantly better. I am not sure what's the difference when it comes to WebView, but transitions are much smoother. However, Chrome for mobile is still number one. I still think this is project with great potential, but when it comes to something like this, probably because project is young, you hit dead end. |
Beta Was this translation helpful? Give feedback.
-
Yes, we also experience this consistently with every app we build with Capacitor. When we install as PWA there are no performance issues - the same app bundled via Capacitor Native on Android has significant slowdowns on many devices. I can also provide a real-world example of this if any Capacitor developer find it useful. |
Beta Was this translation helpful? Give feedback.
-
Just acknowledging that we're aware of this discussion and will discuss with the team after the holidays. Seems strange that mobile browser perf would be better since it's just using the Chrome WebView. And doubly so that Cordova would be any faster as it's using the same browser tech. I wonder if there's some option we have enabled that is causing an issue? |
Beta Was this translation helpful? Give feedback.
-
Personally, Apple's bone does not stop being more powerful, that's why we do not see iPhones with 16 GB Ram, each new version of iOS consumes less and less Ram, battery, the proof is the M1 chips. So it doesn't surprise me that your application takes less than 2 sec to start with an iPhone 11, the ionic + capacitor are for nothing because they rely on what already exists, of course, the size of the application counts as well as other factors, but for the moment the Apple bone is far superior to Android (I'm Team Android for info, I'm at onePlus ^^, with Linux). Then a Samsung is very crappy with their Android layer it's one of the worst of the market, next to oxygenOs for example. |
Beta Was this translation helpful? Give feedback.
-
FYI. I've opened an issue against Android WebView to try to get a discussion started about this: https://bugs.chromium.org/p/chromium/issues/detail?id=1289741 |
Beta Was this translation helpful? Give feedback.
-
Ok just turned off the accessibility settings all together => The lag is gone. Thank you https://bugs.chromium.org/p/chromium/issues/detail?id=1289741#c24 |
Beta Was this translation helpful? Give feedback.
-
@maxcodefaster Accessibility settings is a separate issue from what's being discussed here, I believe. But, what exactly did you disable? You said "all of it", but there are a lot of options and choices in Android Accessiblity. That said, if any app accessibility services are enabled on Android, it will bring WebView apps to their knees, even causing ANRs and crashes. This is something that also needs to be explored, as it is a highly reproducible regression in WebView affecting any moderate to complex app. Though, even simple apps can be affected --- So this is definitely something I'd recommend everyone check for their app performance. Definitely be sure to disable any Accessibility features you can. Even so, you may still experience performance issues and differences between Chrome PWA (which is MUCH smoother and faster, even with accessibility disabled.) Additionally, not everyone has the luxury if disabling accessibility features, so both issues still need to be addressed. |
Beta Was this translation helpful? Give feedback.
-
I went into my settings app and went to "System > Accessibility" and had Darker (https://play.google.com/store/apps/details?id=com.mlhg.screenfilter) turned on, although not actually active and darkening my screen. Turning it off made my app significantly faster. I even did a one for one comparison loading different pages with the same build on two of the same phone models, one with darker enabled and one with it disabled, and the performance difference that it makes having it turned off was huge. So it looks like accessibility apps made be causing some kind of issue with WebView or Capacitor apps. |
Beta Was this translation helpful? Give feedback.
-
Thanks @lostdev - Were you able to create a reproduction app? If you can prove Capacitor is different than Cordova, and provide a sample and a recording (which nobody has been able to do so far,) then it would be interesting to get the Capacitor Devs to look at it. That said... it does not appear to make any difference (to me) between Capacitor and Cordova. Both suffered from this issue in my experience. Also, please add your feedback to these Chromium issues to keep the Android team informed (motivated) & let others know what's going on:
Cheers and "welcome to the club"... |
Beta Was this translation helpful? Give feedback.
-
@lincolnthree thanks; I have already voted and commented on those tickets :) I have not compared with Cordova directly - only know that my site running Ionic 2 + Cordova is working fine, but Ionic 6 + Capacitor is not. If I don't find a solution to this problem soon, I won't have a choice but to try Cordova again. |
Beta Was this translation helpful? Give feedback.
-
@lostdev Interesting. Here's how I would proceed:
That's where I would start. As someone above posted earlier, we've tried all kinds of combinations of WebView settings and none of them have improved performance with Capacitor. So... I think the best way forward is to get a reliable reproduction into the hands of the teams so they can evaluate. Otherwise, I'd look at the Capacitor source code, and try to duplicate the settings Capacitor uses and see if the WebView build slows down the same way: https://github.com/ionic-team/capacitor/tree/main/android/capacitor/src/main/java/com/getcapacitor |
Beta Was this translation helpful? Give feedback.
-
The trends seems to be improving here as well, at least for ANRs: |
Beta Was this translation helpful? Give feedback.
-
Until this gets resolved, looks like I'm forced to release my app as a PWA. In my case, releasing as "Android vs PWA" makes no difference because the app doesn't use native phone features. And I "think" the end user who installs/uses it would never see a difference (other than the PWA being much faster at this point!) |
Beta Was this translation helpful? Give feedback.
-
Some interesting notes regarding android performance in this post. Check the performance section. https://engineering.fb.com/2022/09/30/android/launching-a-new-chromium-based-webview-for-android/ |
Beta Was this translation helpful? Give feedback.
-
Apparently someone from the Chromium team is going to be looking into the issue next week (2023-06-26) and is asking for more information on how to reproduce the issue. I think it's a tremendous opportunity for the Capacitor team and more experienced Android users who can provide all the necessary information. https://bugs.chromium.org/p/chromium/issues/detail?id=1289741#c55 |
Beta Was this translation helpful? Give feedback.
-
Honestly, I think this is the first thing that should be on the ionic capacitor website. I love this project but this is a massive, game-breaking downside. I'm getting like 30fps on an extremely basic app and I wouldn't want to ship something that slow off to a userbase. You would have to ship your own web view in order to fix this, instead of using the OS webview, or use another open source one that's integrated into the project. It would be work but you can't ship a 30fps-capped app out on Android in 2023 |
Beta Was this translation helpful? Give feedback.
-
@mlynch in case you guys haven't already seen this, facebook seems to be shipping their own webview: https://engineering.fb.com/2022/09/30/android/launching-a-new-chromium-based-webview-for-android/ considering how crucial the webview is to capacitor it seems to me you should look into what FB is doing here (if you are not on it already), especially since someone from the the chromium team basically said now that the android system webview will always suffer in performance compared to the chrome browser: https://bugs.chromium.org/p/chromium/issues/detail?id=1289741#c59 |
Beta Was this translation helpful? Give feedback.
-
Yeah, I wonder if Facebook has open-sourced any of that, or if they plan to. I have not seen it, if so. But this issue is a huge problem and doesn't seem like it's going away any time soon. |
Beta Was this translation helpful? Give feedback.
-
Hi @AE1NS are you still using Capacitor for your "Portazon" app? |
Beta Was this translation helpful? Give feedback.
-
If you want to help, then encourage the Android team to fix this. There is nothing the folks at Ionic / Capacitor can realistically do right now. Vote for this issue and submit a debug trace for the folks at Google to analyze: https://bugs.chromium.org/p/chromium/issues/detail?id=1289741#c55 |
Beta Was this translation helpful? Give feedback.
-
@lincolnthree @AE1NS Have you tried Capacitor-GeckoView? It purports to interface Capacitor with a bundled GeckoView based on Firefox: https://github.com/recative/recative-system/pkgs/npm/capacitor-geckoview |
Beta Was this translation helpful? Give feedback.
-
I've made a simple Capacitor-Geckoview app here: https://github.com/imslp/capacitor.geckoview In addition to using Geckoview it showcases accessing local files and using SQLite. It works well enough but is by no means polished, PRs welcome of course. |
Beta Was this translation helpful? Give feedback.
-
Well the issue of this webview madness is not yet considered serious by Chromium/Google team which is sad :( , i think i will be wise if the Ionic/Capacitor documentation address this issue for android in the docs. Is using cordova for android release is wise for temporary solution #cmiiw ? |
Beta Was this translation helpful? Give feedback.
-
Follow up: #3229
As well as many other users, we have a performance lack in Android with a complex Ionic application. Its optimized with lazy loading and does have the OnPush changeDetection to prevent many angular checks. iOS and the web version is just running fine. Bringing the app on a Galaxy S20+ does not have the performance I expected. Skeleton animations are hanging sometimes and an ion-slides with some images inside are not as smooth as in iOS or web when dragging it. Oddly enough it seems to run better on Googles Pixel devices in our case.
App start: Our app loads some http data (server cached) before hiding the splash manually. These are the approximate starting times:
iPhone 11: <2 seconds
Galaxy S20+: ~3 seconds
Galaxy S7 edge: 5+ seconds
At the moment I cant find any more bottleneck in our code to improve this, so maybe there is an Android based native/web view problem maybe?
Unfortunately I can't give a sample project to reproduce this issue, but I wonder why no Capacitor developer ever noted a more or less strange difference between iOS and android.
Update
I minimized the startup time by moving some unneccessary code after the splashscreen.hide method. Basically we have some mandatory code that needs to be run before the splash gets hidden (APP_INITIALIZER). Its now booted in about 4 seconds on a Galaxy S7 edge, so I am fine with this.
I also changed the ion-slides on our start page to CSS snap scrolling, so its feel much more better on a S7 and on a S20 I get even more frames (feeling like 120FPS now and 60FPS before).
But there are still strange effects, that happens on android but not on the web. When I navigate back and the top layer page closes, the transition starts after about a second. On the web (same device) it starts immediatelly.
Beta Was this translation helpful? Give feedback.
All reactions