Ionic Transitions in Lollipop are slow

41

I noticed my app seems sluggish on my nexus 5 vs. testing in browser and came across this thread. Is there a resource for best practices / optimizing an ionic app? Good info here, wondering how else I could optimize my app for best performance on-device?

42

Hi 406digital, from what we know until now, there is a bug with shadows in android lollipop and ionic. this means that every animation for page transition to another page that has shadows in it will slow down the performance, so the only thing currently is to wait for some bug fixing…there was something i read about chrome interval regression, which i think is supposed to help, but i am not sure 100%… still looking for fixes on this as well…

2 Likes
43

Hey guys, just to know we considerable improved performance by adding this single rule to css:

* {
    box-shadow: none !important;
}
2 Likes
44

that worked for me; it gave me WAY better performance improvement than Crosswalk on kitkat (and was many megs smaller)

45

+1 for Performance improvement in Android 5 - disabling Box shadow on android is a MUST!

46

Any more tips on this subject? Disabling box-shadow definetely improved performance but it’s still pretty bad on my Nexus 5 (5.1).
I’m getting almost native performance on S3 Mini and S4 (no crosswalk) and iPhones.

47

Are you using the ionic view life cycle events correctly on your controllers/views? I had transition animation issues until I really understood the view life cycle and moved my events around correctly. Once I did that on lollipop and pre lollipop I have lmost no lag in any of my transitions. I know it’s very situational but I highly suggest using the view life cycle and seeing if tht helps with the transitions. Let me know if not or if you want a second look at your events to see if they can be better organized in your controllers.

48

Hi same problem here, however it’s not about dropshadow.
I’m also using a LG G3, just testing a template with sidemenu, no added functionality. It is choppy when published as a app, while very smooth when running in both the native browser and chrome. Tried removing drop-shadow globally, doesn’t make a difference.

49

Are any of the elements on your page absolutely positioned? Are there multiple such elements? If so, try changing position:absolute to position:relative and see what happens.

I had ~15 absolutely positioned elements on my page. Transitions to and from that page were very slow on both iOS and Lollipop. Upon making them all relatively positioned, performance increased dramatically on both OSs.