Ionic Transitions in Lollipop are slow

Did you guys installed the updatable WebView from Google play?

I updated my HTC One last night to Lollipop and installed the WebView from Google play, then now are running smooth(Modal slide-in-up, scrolling list of cards with reorder enabled, Matteo CV, Showcase apps, etc) :smile:

try to declare will-change css property in your styles for animated element to specify what propeties will be animated

Hi @mhartington,

Any updates on this issue? I noticed that LG G3 with lollipop shows a huge lag on animations and not sure why it downloads automatically crosswalk build from playstore.

Thank you in advance.

Same issues… On Galaxy S4 with KitKat everythings was fine. Now… with the same device but with Lollipop all the transitions in my app are really slow and not smooth. Instead to be faster (with lollipop) my app transitions are broken. Any solution will be really appreciate. From this point of view kitkat is better than lolipop

Can you provide any code examples?
We’ve tested our animations on android 5 and it’s been really smooth for us.
Maybe there is some code running while you are trying to change states?

Hi @mhartington,

I got some animations for core elements for a published App. It lags on LG G3 and works fine with crosswalk build. Currently, I did crosswalk build for all versions.

Maybe you could suggest some animations that I’m doing wrong from my App. Here is the link:

Quoteria playstore

Thank you.

@naveenkarippai1 yes, that’s really laggy. Specially when you change tabs. Motorola Moto G running android 5.

Yes, but I see very good performance on One Plus One with 4.4.4

Hmm, I tested the app on my nexus 5 and I do see some issues. @naveenkarippai1 are you including angular-material as well? From the tab transitions I’m seeing, it seems like it.

It may be related to ng-material.

Even got rough animations on another 4.4 device.

Maybe related?

Above have a code to simulate what’s going on.

Hi @mhartington,

Yes, I do have ngMaterial included.

So that could be the source of your issues.
Try rebuilding without ngMaterial

I have a similar issue with transition, that i tried to describe before, however, it was not really clear.
I reproduced a sample app, starting from the sidemenu template, that show the issue, you can try that, by using as a starter app:
ionic start demo
Is it a problem in my implementation? on Nexus 5 lollipop, and nexus 7, it’s really laggy, where as the sidemenu is silky smooth. Click on the See all link at the bottom of the first page is not smooth at all.

@diab_olik, the same here. I’d suggest to turn off transitions, and make them by yourself.

On .config() of app.js:


@mhartington, several users are reporting laggy issues on Android, mainly using transitions. Do you know if a fix is on roadmap for future versions?

So the main performance throttle in this example is all the drop shadows caused by the card class.
Shadows in general should just be avoided for their performance issues (they cause lots of repaint for each animation frame, ie: laggy transitions )

I was able to swap out the card class for list-inset, get the same visual effect, but much better animations.

@raphaelpinheiro and @diab_olik

@mhartington, it’s a good tip. Thanks. But even though, it still a bit laggy. Would it be a limitation of Ionic, Cordova, or what? It’s important note that in chrome desktop, everything works like a charm.

It wouldn’t be a limitation of Ionic, since Ionic is just responsible for the UI.
This would be an issue with overall browser performance, especially on mobile devices.
Odd, because the first run through of the app on my desktop it run really slow, but smooth after I switched to list-inset.

So something that can be done about this is to just look at what is in your view. Having a slide-box, multiple lists with drop-shadows, and over all complex views can be a big pain on mobile (it’s a lot for the DOM to handle). A big tip would be to just look at whats in the view, and seem what you can trim away.

1 Like

Hi and thanks for the tips, indeed, it’s working way better with list inset.
But what I find really strange, is that, when I downgrade to ionic beta version 12, it s much more smooth, even with the cards and all the shadows. Is it normal?

1 Like

Similar observation. Scrolling with crosswalk on Android devices (Nexus 5 and Moto g) was much better in beta12/13. Native scrolling is addressing these issues but it is not supported for Collection repeat.