Ionic Transitions in Lollipop are slow

Hello Ionic Team. I just upgraded to a LG G3 phone, with android lollipop. I started checking my ionic projects, and while some elements work better, for some reason, all the animations are slow, and in the 4.4 the animations (the new beta 14 ones) worked like a charm. Did anyone have the chance to check an ionic application in lollipop?

Also, I checked the frontpage app, and its animations were better , i don’t really know why…

Any input would be appreciated :smile:

Are you using Cordova or Crosswalk? I was told (didn’t try it myself) that you shouldn’t use Crosswalk for Lollipop, as its webview is already based on Chrome.

Hi urbgimtam, i am using cordova, in phonegap build.
When i had the android 4.4 version, the webview was chromium 33 version i think, and now in lollipop it is version 37, so its supposed to show better. but for some reason in lollipop i see slower animations, and in the 4.4 version, it worked great…

I thought that upgrading to lollipop will give me better ionic apps performance, but now it is actually the opposite. did you try an ionic android app in lollipop perhaps?

Hey there, so where are you seeing these slow animations?
If you trying to load a lot of data while switching pages, it could the cause issues with animations.

I have a 5.0 device and the animations work very smoothly

Hi mharington, i have an LG G3 phone, and i checked and it has a built in webview with chromium version 37.
In my last phone, i had android 4.4 and the new transitions worked great, but now with android 5, i thought that it will work even better, but for some reason it works a little bit sllugish, more than the 4.4 version.

I am talking even about regular page transition only with text, no dynamic elements…
you probably have a nexus device?

Yup, I have a nexus 5.
But I also have an old Motorola phone with crosswalk that can handle the animations.

I have a nexus 6 and the animations appear slightly slower than an older device, particularly the popup slide up transition which appears smooth on my samsung galaxy s2 but a little bit juddery on the nexus 6 where I thought it would be the other way around.

s2 is jelly bean
n6 is lollipop.

ellistokes, that’s exactly what i am saying. i thought in the new version, android would work much better with hybrid apps… i actually checked on the nexus 7 with lollipop, and the same slluginess in animations is present…

@elliotstokes and @shaulhadar

Any way you can put together some codepens and demo this?
I got a nexus5 with android 5, so i’d like to see what examples you specifically have?

Hi @mharington, i will check out how i can make a demo for you… i will update you as soon as i have one online. :slight_smile:

Also, I checked and i saw the Matteo CV Ionic demo, and when i had the android 4.4.2 and tested it the animations were smooth , but here in lolliop, the animation doesn’t work almost…

just install the app, and press “Matteo Tasseti” under the personal details, and you will see.

I will still look for my example and try to put it online somewhere…

I found out what was causing slow transitions in our app.

We were making heavy use of the .card class which was adding a box shadow to all the cards. On Android this causes all the transitions to lag. Removing the box-shadow on android speed’s everything up a lot.


Hi , thanks for checking it out. It does work better without the shadows. Butbi also figured another thing. My device is a lg g3 and it has a qhd screen. Maybe this fact makes the app animations slower? Did anyone seen this also perhaps?

I have an LG G3 also with Lollipop and it’s performance in general since upgrading has suffered. The issue with drop shadows reminds me of the old days when trying to improve performance on Android vs iOS, from memory it was down to the lack of hardware acceleration but we are talking pre-kitkat jQuery Mobile days. Any chance it is not kicking in on Lollipop for some reason?

The LG G3 is a great phone that Lollipop has hamstrung for the time being, but if it is happening on other devices, then taking a read of @mikkokam’s tips might help: Drag element and move it around - performances and animation

I am also experiencing super slow transitions on a 5.0.1 G3 Prime (Adreno 420). Even with a blank project with empty views it’s incredibly choppy. Modal slide-up is also quite choppy. Sidemenu opening is super smooth, however…

How is that even possible? I also got super smooth Sidemenu animation… but from the starter Sidemenu template, when I click on an item of the playlists, the slide animation is laggy and annoying.
Running on Moto G 2013.

1 Like

I have the same thing as well. Side menu comes out smoothly, but all page transitions are lag. You actually don’t see much of an animation at all because it takes so long to get to the page that it jumps.

It is a really strange issue. Is this because of ionic or because the LG G3 has the 2k massive resolution which maybe makes the animations work harder? Also i noticed there is a problem when transitioning to a page that has elements with box shadow…

Unless your transition is even worse than mine I doubt it’s a device performance issue. My G3 Cat 6 has some extra oomph and it’s still pitiful. Every other optimized animation performs as expected. I wonder if it’s a Chromium bug for this resolution. We need someone with a lower res 5.0+ device and another QHD device (GS5 Cat 6 / GS6) to test.

On my Nexus 5, i have the same issue, a pretty simple application, a side menu with several link,
on the home page, a slidebox with three small image at the top, a bit of text, and a list of 3 items (the first three, of a longer list), with a link to the the whole list on a second page.
On beta 13 and before, transition between the home page, and the full list, so a simple view to view transition, was working prefectly, since beta 14 and RC 0, 1, those transition are not smooth at all, sometimes even really laggy.
The side menu however is perfectly smooth, i tried to deploy with crosswalk, and it’s a bit better, but still really may less smoother than beta 13.
Even the the starter sidemenu aaplication is not perfectly smooth, when clicking on a playslist, and going to detail view, it’s way more laggier than beta 13.