Jerky CSS animation on Android

I am using a css animation and it is working fine on iOS, very smooth and looks good.
It is very jerky and looks like rubbish on Android.

I’m sure this is a common issue but I can’t find any recent posts in here on it.

Can anyone point me in the right direction to fix this?

For reference I am using the package below but it is just normal CSS animation and works fine everywhere (web, iOS etc) except on Android.
https://filipows.github.io/angular-animations/

Any help massively appreciated. I’m thinking this has to be a common issue.

Here are the comparisons:
Android (jerky)

iOS (smooth)

This is what I am using:

const slideInUp = () =>
  animation([
    animate(
      '{{duration}}ms {{delay}}ms',
      keyframes([
        style({ visibility: 'visible', transform: 'translate3d(0, {{translate}}, 0)', easing: 'ease', offset: 0 }),
        style({ transform: 'translate3d(0, 0, 0)', easing: 'ease', offset: 1 })
      ])
    )
  ]);

Having the same issue with Swiper.js now.
Surely there is a way around this or do Ionic developers just put up with jerky animation on Android devices?

Hard to say what the issue is exactly without being able to reproduce it myself. One thing I do notice is that you are blurring the background when the animation starts. Using the blur() function is fairly expensive, so you might want to try removing it and see if the transform animation improves at all.

You can also use the Chrome Dev Tools to inspect the application and see what might be causing the slowdown. The “Rendering” tab at the bottom of the dev tools lets you add an FPS meter (“Frame Rendering Stats”) and lets you see when things get painted (“Paint flashing”). Working with those two options may give you a starting point for investigation.

1 Like

Thanks for the response.
For the one mentioned above I actually resolved the issue by using the ion-modal in ios mode. Works great. Obviously the Ionic team had resolved the problem somehow.

With Swiperjs I am not going to have a lot of control over the animation but I will take a look in with the browser tools. I think this may become a common issue now that ion-slides is being deprecated.

Here is my stackoverflow. It appears fine with just HTML so I think it is due to the conditional *ngIfs or similar.

ion-slides uses Swiper.js under the hood, so if you are having issues when using Swiper.js directly then ion-slides is likely going to have the same issue.

Swiper.js handles gesture interactions by calculating each slide’s transform value during every rendering frame. This gives the maintainers the ability to add a lot of cool features, but the downside is it comes with a performance overhead that is more noticeable on mid/lower range devices. Depending on your use case, you might want to consider using CSS Scroll Snapping instead: Practical CSS Scroll Snapping | CSS-Tricks

2 Likes

Interesting I will look into that.
I have improved it somewhat by tuning my code so I will see how much better I can get it.
At least devices are getting faster.
Although it seems to be a limitation of the Android webview.

Thanks for the help.

1 Like