Animations lag on android (smooth on iOS?)

I’ve been noticing there is a general lag with ionic on Android, especially with animations. Testing the app on iOS (via safari and ionic serve) there is no lag, it is completely smooth. Right now the code is just a slightly modified version of the default tabs template (only some small html changes).

The lag is more pronounced on the actual device. The video doesn’t show the lag that well. But you can still see some of the stuttering/lag. https://www.youtube.com/watch?v=c4HPge4cfi4

Taps/clicks seem to be just as speedy on both devices (not plagued with the 300ms delay). The main problem is the animation in the friends tab being a bit slow, which causes the whole app to just not feel smooth and cohesive.

The device I’m using is a Nexus 5 with the latest version of android (4.4.4) and an iPhone 6. I completely reformatted the android device before recording the video, so there shouldn’t be any problems with the OS or device itself.

Thanks!

3 Likes

Are you using the .13 beta? I noticed that it was less laggy on Android than the .12 bet IMO

Just checked my bower.json, I’m using 1.0.0-beta.13.

This is happening to me too. I was using 0.11 and animations simply worked fine and smooth. Yesterday I upgraded a couple of apps to 0.13 and the view navigation begun to have fps drops. I checked if I messed something up with bower and libs but it was fine. Then I checked the tabs demo app and It has lags too! Here it is a screenshot of what i’m talking about (on Nexus5, after many transitions back and forth in navigation)


1 Like

I’m finding that the animated transitions on a Nexus 10 are jerky to the point of only rendering one or two frames. It doesn’t seem to take any longer for the transition to happen, but there’s virtually no animation, just a very jerky movement between states.

It seems fine on older and far slower devices (but with lower resolutions).

In other parts of the app. I have an image carousel based on the standard swiping components, and it’s smooth on every platform.

Edit:

I’ve been chopping away at various code executed when the new screen is displayed, on the basis that the stutter is caused by one or more promises maturing and the code excuting in the “then” statement somehow slowing things.

However nothing really makes any difference aside from the presence of the sidemenu, Commenting out the processing code (and the injected services it depends on) and leaving the sidemenu intact didn’t affect things much.

Restoring the processing and DI and then just commenting out the sidemenu present in the html had a significant effect - not as smooth as the blank sidemenu project, but an order of magnitude better.

I’ve spent a couple or hours this morning / afternoon trying to get a small enough slice of code to see the effect.

I started out with the sidemenu sample project from scratch (native-style smooth) and then gradually added more code representative of my setup, in particular:

  1. the slow transitions seem to be to / from views that have sidemenus attached to them

  2. the content of the sidemenu is fairly complex with prompts / icons etc. shown and hidden dependent on various scope level functions and values.

By progressively ramping up (2) with some cutting and pasting, I can just about convince myself that the animation is silghtly slower / less smooth the more content resides in the side menu, but I’ve been editing, rebuilding and looking at it for so long now, it’s not certain. It’s certainly nowhere near the jerkiness of the actual app.

I could see there might be an issue with the conditional code in the side menu making the digest cycle etc. more complex and leading to resource problems at the point the animation takes place, but I don’t have any compelling evidence for that.

The fact it doesn’t seem to have the same issue on older / slow hardware also makes me think it may be that the Nexus 10’s horsepower is working against it; it’s rendering the animation and trying to process the sidemenu / main code and failing to do it smoothly and so noticeably, whereas a more resource restricted device performs the animation and tidies up afterwards but the apparent experience is better.

I’ll return to the issue and see if I can provide something more helpful, but at the minute the plan is just to ship with that jerkiness as it is and address it down the line.

Could you provide a demo of what you have @mrsean2k? I can test it out on my nexus 10 simulator.

1 Like

I’m also seeing very jerky page transitions on Android. It has gotten better in the past few betas but it’s far from feeling like a native app. Also when pulling out the side menus it’s pretty slow to respond, then the slide animation is kinda jerky.

I’ve only tested this with my nexus 5 running Android L run directly from Ionic CLI. Runs perfectly fine on iOS, seems like a native app.

Do any of the ionic guys have an actual Android device @mhartington? I feel like this might not be reflected on an Android simulator with the proper x86 extensions.

Edit: I’ve also found that some other Ionic applications like Sworkit run fine on my Nexus 5. I think they could be compiled using crosswalk because of its enlarged (>20MB) size. Do you know if that’s the case?

2 Likes

I have noticed slow / jerky animations too in my Android builds. Definitely a huge difference between iOS and Android builds. Following this thread with interest.

2 Likes

Do you need the APK, full project, or a minimum example? Possible it’ll take me a while to get a minimum version, it’s a fairly involved app (by my standards)

Sorry, worth saying I also see this behaviour on the Nexus 10 Genymotion VM as well as the device.

Just a minimum example. No need to send a full apk. I can use either a genymotion vm and an actual device to see what going on

Hi, I’ve added to my original post, but the minimum example is the real difficulty at the minute. I’ve tried gradually stripping things out of the full app. until it seems smooth, and adding things to the sample app. until it seems jerky, but I’m not converging on an example that’s demonstrates the issue in a small codebase.

I intend to return to that, but in the meantime, I have the app. tested with private Google+ community. Would it help to add you to that list so you can install the APK, get a sense of what it’s like?

Yeah we can do that, find me at mike[at]drifty[dot]com

Ok, done; I think G+ will send you an invitation with a brief message, thanks.

I was seeing really poor scrolling performance on an Android 4.1.2 device (Moto Razr Maxx HD). Basically unusable. As an experiment, quickly tried compiling my app with Crosswalk and the performance, while not perfect, was much better. Basically usable.

Android 4.4 is when google switched WebView to be based on Chromium, so it’s not too surprising if you were running android 4.1.2.

Yes, that was expected. Crosswalk even improved the performance on a Moto X running 4.4.4, which wasn’t expected.

Just fyi - native overflow-scrolling on the 4.1.2 device performed just fine, it’s just ionic’s scrolling that performs poorly on it.

This may be related to Ionic Slide Performance Problems on Android

Yes, seems to be a related problem. I already tried crosswalk, doesn’t change much compared to Chromium on Android 4.4.4. It really seems to be a problem with recalculating the styles. I works with very little elements within a ionic component but with a few elements the performance lag becomes noticeable.

I saved a timeline log: https://www.sendspace.com/file/lrlxmn

Chrome -> Timeline -> Right Click -> Load Timeline Data