Scrolling and animations in Android emulator really slow


#1

Is there a way to improve the ionic on Android ?
Right now using emulator, the default and GenyMotion and is really slow the scrolling and animations.

At iOS simulator is a pleasure, but in android is a something not usable

pd: the latest stable and nightly offers the same disastrous performance


#2

I’m just experiencing the same disastrous performance in my android phone. It’s like the scroll performs at about 5fps and tapping a button that transition to another view takes about 1~2s to start the transition. Also the transitions are sluggish. This needs to be improved a lot, it doesn’t look like native at all, it performs poorly than the web browser.

I’m testing on a Samsung Galaxy Nexus with 4.2.1 Android (3.0.31 kernel).

The same app on my iPhone 5 runs almost perfectly, also in an iPhone 4 it performs well.


#3

I’ve had the same problem on Android. Although my Android testing-purposed phone has a high performance. Scrolling on Android is terrible slow and lagging. Please consider to fix this critical problem as soon as possible. It’s really lagging when I set a cell’s property high.


#4

Yes this is a huge priority for us and is what I’m actively working on now. Would you be able to describe your markup that has poor performance? Is it just a large list by itself, or is it a list in a side-menu, or in a tab that also has a side menu? A simple example of your markup would help me make sure I’m addressing your issues.

Also, we’re actively adding e2e tests, and @andytjoslin is currently hooking our tests up to Sauce Labs to improve our testing.

So yes, we’re addressing this and not considering what’s out there as done.


#5

Thanks for your support, you could see a demo of ionic-angular-cordova-seed or install it on your android phone: https://github.com/khanhtq/ionic-angular-cordova-seed.git
After installed, on the Home screen,

the content loads the content loads unsmoothly, it’s hard to scroll down
it’s significant lagging when you scroll down so far. It’s not smooth like other popular apps like Facebook, I hope we can fix this later.
P/s: I think that it’s more lagging when using ng-bind instead of using {{}}, maybe we shouldn’t use ng-bind. Thanks a lot


#6

Hello

In my case are views inside a side-menu , there are lists, huge paragraph and a big form that need scrolling


#7

I’ve made some significant changes to the CSS in hopes to improve Android performance. Would some testers be able to pull down the latest nightly build and let me know how I’m doing? I’ve been testing on and Android 4.0 and 4.3 and have noticed improvements, but I’d like others to do the same and provide any feedback to help improve it further. Thanks!

http://code.ionicframework.com/#nightly


#9

I can confirm that the scroll is improved :wink: tested on Android 4.1.2 :wink:


#10

I get the same issue with Beta. Removed all watchers and list with more then 20 elements - scrolls sluggishly. Test on Nexus 4 and 5. I scare to run it on older models :(. Examples in Chrome have no sense since its other Env. There all works fine. (FYI)


#11

Generally I have 2 controllers that use list. The 1st example have double column and have totally 19 elements:

<div bindonce class="row" ng-repeat="group_triple in visible_groups " ng-class="{'wm-last-group':$last}" repeat-done="groupLayoutDone()" ng-cloak >

                
                <div class="col padding" ng-repeat="group in group_triple">                        
                    <div class="item padding" ng-style="groupStyle(group)">
                         <div class="row padding">
                        <h3 class="wm-group-header" bo-text="group.mTitle"></h3>                         
                    </div>
                          <div class="row padding">
                       <h4 bo-text="group.mStartDate | date : 'MMM d, y h:mm a'"></h4>
                    </div> 
                    <div class="row">
                        <a class="button"  bo-href="'#tab/group/' + group.mEventId">
<!--                            <img style="width: 90%; height: 90%;" bo-src="'img/default.png'">-->
                        </a>                         
                        
                    </div>                        
                    </div>
                </div>  
            </div>

I removed images and have the same lag.

My other list has about 120 contacts and all of them have the same image:

<div  bindonce ng-repeat="contact in visible_contacts| contactsFilter:searchKey" 
              class="item item-button-right item-thumbnail-left">
            <img bo-src="'img/default.png'">  
            <h2 bo-text="contact.displayName"></h2>
            <h4 bo-text="contact.emails"></h4>
            <button class="button button-clear" style="top: 33px"
                    ng-click="contactSelected(contact, $index)"
                    >
                <i class="icon" 
                   ng-class="{ 'ion-checkmark': !contact.selected, 'custom_checkmark': contact.selected }"
                   style="margin-right: 5%"></i>
            </button>
        </div>

Tested on Nexus4 (5)
1.0.0-beta.1

If you need additional info, glad to support

Best regards,


#12

Last comment on this thread was made in March 2014 but it seems the issue mentioned is still there.

I am also facing this sluggish scrolling and animation on my android device + Genymotion too. I am using Android 4.1.1. Using latest ionic and cordova to build app.

In my app, I am using side-menus, lists and cards within tabs, modal (slide up) on click of a button and all of these have interaction issues.

I will soon share the demo app code with these performance issues for Ionic team to work on it. These performance issues are show stoppers for Ionic to get accepted among Android app developers. Sorry to say, with such sluggish scroll and animations, no one will build production level Android apps using Ionic. I think these issues are not there on iOS and are limited to Android. Quick fix to these issues will help lot many Android developers (including me) who want Ionic be the de-facto framework for building hybrid apps.


#13

Hi there

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

Thanks
Darren


#14

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.


#15

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.


#16

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.


#17

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


Javascript animations for android below 4.4?
#18

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


Slow on Android 5 and up
Running app on an Haier (Android) tablet is very slow
Has anyone integrated an Ionic project with Crosswalk or Android ChromeView?
#19

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


#20

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


#21

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