Animations lag on android (smooth on iOS?)

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

Animations in my app work consistently in IOS, but on my S4 (Android 4.4.2) they only seem to fire a fraction of time. Usually, the view/modal just appears with no transition. I haven’t tested this on other Android devices.

I’m not using a side menu.

1 Like

I found the reason for the lag in my case.

The on-slide-changed fires not when the animation/transition is done but somewhere in the middle of the transition.

  • on-slide-change sets $scope.currentSlide
  • I have a element on the same page, something similar like the slide-pager, let’s call it my-slide-pager
  • my-slide-pager has a ng-class="{current: $index === currentSlide}"

Now the problem is, that the my-slide-pager has quite a few dom elements in it. When the class changes, the browser recalculates styles, which takes a few ms, noticeable on Android, but not on iPhone.

Since the class change occurs during the slide, the slide animation lags.

I have no workaround yet. Keep you updated.

Try ngTouch on a divs container for sliding events. The divs would be sliders containers. Use animate.css for animations. Simple as that and fast even on 4.0.4. Example for my swipeable tabs, but would work as slides as well:

  <div>
    <div ng-class="animationForTabs" ng-show="tabFirmsVisible" ng-swipe-right="swipeTabRight(1)" ng-swipe-left="swipeTabLeft(1)">
      <div ng-include src="'tab1.html'" ng-controller="FirmsCtrl" ng-cloak></div>
    </div>

    <div ng-class="animationForTabs" ng-show="tabNewFirmsVisible" ng-swipe-right="swipeTabRight(2)" ng-swipe-left="swipeTabLeft(2)">
      <div ng-include src="'new_payment_information.html'" ng-controller="NewFirmsCtrl" ng-cloak></div>
    </div>

   ....
</div>

If you want scrollable content in the sliders, try to remove ion-content and replace with div with overscroll-y: scroll. Replace ion-views with divs. You’ll notice the difference.

I’ve realized that consequently removing <ion-... directives speeds up my apps a LOT.

1 Like

Thank you. I’ll try that out. Do you think it has something to do with translate and translate3d?

My theory is, that by using animate.css you use translate3d, but ionic-slide uses translate. (@ionicteam: please clarify)

And since translate3d is harware accelated, is feels smoother.

this is very interesting, thanks for the tip. i’m definitely going to try this out.

i haven’t actually dived into the ionic directives, what exactly is happening beyond controlling the overscroll-y property? is there any one particular thing, or is it simply the fact that directive processing is happening at all?

Ionic moved from translate to translate3d on nightly. Looking forward to try it out.

Hi guys,

I noticed the same laggy feeling on Android while moving from beta-11 to beta-13. iOS works just perfect but on Android simple page transitions are very laggy.

Tested on real Android devices:

  • OnePlus One, Android 4.4.4 (CyanogenMod)
  • Nexus 5, Android 4.4.4 (native)

Even <=beta-11 is laggy on my brand new OnePlus One, which astonished me.

On my old dusty Samsung Galaxy S2 (Android 4.2.2 - CynogenMod) its relatively smooth compared to the other more powerful devices.

@IonicTeam: Are you testing also on real Android devices before releasing a new version? Or is your focus on iOS devices? Thanks for clarification.

Cheers,
Stefan

As an attempt to see if it’s processing occurring mid-animation that cause the jerkiness, I made a few changes to one of the slowest screens so that all of the startup processing in the controller is wrapped in a new method and calling is deferred using $timeout.

With a value of 5000ms this should fire a long time after any transition has taken place:

$timeout(function () {
  $scope.loadAd();
}, 5000);

unfortunately that made only a very marginal difference, probably within experimental error

Same problem here, I went as far as deleting the whole page controller to be sure that there was nothing delaying the animation but still the animations appear slow and choppy. I have packaged the app with crosswalk and cocoonjs to see if I can squeeze a little bit of performance out of it but improvements in animations were marginal.

Animations were never great on android, at best they were ok but now feel worse than they used to; this forces us to remove all page transitions from our app in hope this it will minimize the bad effect on user experience (so many bad comments were given to us from our beta testing community because of “animations not like native”)

@ionicteam, please provide us with a solution to this problem, it makes our apps seem like second class and cheap failing to impress next to native just because they feel stuttery and not as smooth. No matter how many more widgets we have available it doesn’t matter if the level of user experience we can offer our users is lacking.

2 Likes

People, I’ve had same issues but some day I found animate.css and I’ve been shocked how fast animations on an old 4.0.4 can be. I know this sounds like a crappy TVshop commercial, but you should try this CSS. It shows that speed of animations has nothing to do with webkit, crosswalk or Android version. They are just fast from the top of the box if done properly.

Thanks for the pointer. Were you able to use it to power transitions between pages/tabs/etc? If so, mind sharing how? Thanks!

Good point. Would be really great to share with us your animation code (e.g. for page transitions as they are key to have an app experience).

@ionicteam: what about integrating animate.css in your product?

I should point out that I only see this particular issue on a Nexus 10 and have had reports from testers of it happening on one of the newer, faster Sony Xperia models. On older and more resource constrained hardware, the animation is far smoother.

These seem like pointers to me that there is more than one factor in play, and the difficulty I’ve had isolating a small example that displays this behaviour seems to bear that out, as well as making it very difficult for devs for address.

I’d say it makes sense to get to the bottom of the actual issue, rather than switch in something else and hoping it goes away. I don’t think anyone’s withholding a solution just to aggravate us. :smile:

@rajatrocks, @sni: I’ve built my own tabs with sliding animations because adding animate.css to ionics tabs, though improved it a bit, wasn’t as significant change like in the case of removing the ion... tags and replacing them with simple divs + animations. The sample code is in this thread above. You’re smart, you should handle :slight_smile: If you need to check this on a living app, I’ve published one already, but be careful, it is only in Polish language :slight_smile: I can provide a link if you want.