Scrolling and animations in Android emulator really slow

Hi there

Can I just ask whether you have android:hardwareAccelerated set to true in your manifest

Thanks
Darren

Yes, the hardware acceleration has been set to true in manifest file.

Noted one more thing:
In desktop chrome scroll and animation works fine, but if I open chrome debugger and select the below element in debugger before scrolling, scrolling dies … it gets slugging. Same with animation.

<div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">

This element is under ion-content element

<ion-content class="scroll-content ionic-scroll  has-header has-tabs-top">

Why so ? Any reasons for it ? Sharing this info as it might be related to this issue.

1 Like

I’m having the same issue.
Scrolling performs really bad on Android Devices, and in desktop google chrome, when opening Chrome debugger and selecting the scroll div, The scrolling gets really laggy.

Also noticing not as smooth as iOS.

Would be nice to get some ionic buy in on this - I believe Telerik - Kendo had similar probelms but they have overcome them now. In the back of my mind was also that they preferred Hardward acceleration OFF - which I recall as being strange.

Anyway I do hope the Ionic Team get involved here - the last think a framework needs is a performance issue perception.

also noticing a huge performance difference between Android and iOS. Android apps are so sluggish that it feels 5 frames per second.

ionic team, please get this fixed. something is horribly overworked to make android webviews go crazy.

tested on samsung galaxy s4 lte-a 4.4

Guys, I was also facing the same problem (sluggishness of ionic apps on android). I think the issue is not with Ionic but its with Android’s webview which is not so up to the mark. Just for info, this issue is only for Android versions < 4.4 as from version 4.4 onwards Adnroid have chromium based webview. Try packaging your app with crosswalk, a chromium based run time / webview for hybrid apps.

I tried it and now I do not see any sluggishness in my app on android devices. I used Intel XDK to package my ionic app with crosswalk. Simply import your Ionic app’s www folder in XDK and used “Crosswalk for Android” option under “Build” tab of XDK. Try the generated APK on your android device, hopefully you should now have experience on Android.

Regards,
Gaurav

1 Like

Awesome are you kidding us ?
I will work on it now, then give feedback.
Thank you !

I tried xdk this morning.
It generates the apk files fut unfortunately I can’t install it on my device (installation failled)
Tested on android 2.3

Did you uninstall the old one before trying to install the new ?

No, but I have defined different package & app names.
I’ll try with uninstalling the old one.

@dbar as far as I know crosswalk does not support Android versions < 4.0. Try XDK generated APK on android 4.0+

It seems there is no option to build APKs for 4.0- version, for them we just need to depend on default webview of Android which is not that up to the mark :frowning:

Regards,
Gaurav

Hum thanks for the tip.
Unfortunately I don’t have a 4.x Android device here :frowning:

Would it also improve performance on Android 4.4.X?
I’m having really slow transitions on 4.4.X devices :frowning:

I noticed a good improvement on ion-list when packaged with crosswalk, but the app size increased a lot !

@Tenzoru well you need not to package android app with crosswalk for 4.4 as Android 4.4 comes with chromium based webview. Why to add extra stuff to your app when you actually don’t need it. Crosswalk is helpful for Android 4.0 to 4.3 versions.

@nbamj Yes app size is a big issue when packing with crosswalk. My app APK was 17.8 MB but after install it takes around 50 MB on phone … that’s too much for phones to handle :frowning:. Without crosswalk it was just 2 MB. Well I think we need to use crosswalk till the time Android 4.4+ does not holds major share in Android market.

Regards,
Gaurav

1 Like

Also had extreme sluggish scrolling with my Ionic App on Android 4.3 (Samsung Galaxy S4 Mini).

Totally disassembled the code to find out what the reason is. In the end it was only one line of CSS. I had an background image for ion-content with a css class having set

background-attachmend: fixed;

and this was causing the whole problem.

TL;DR;
If you have an background-image for your app just don’t use background-attachment: fixed

4 Likes

very very interesting. that might be the exact cause of my woes. i’ll try out a non-fixed background and see if that helps at all. thanks!

I have tried ng-bindonce ( https://github.com/Pasvaz/bindonce )
It worked well for lists with ng-repeat. Page transition animation got better, though not as fluid as on IOS. Still it s a good improvement.

yes,my app too.it was about 20MB