Css animation bad performance on tablet

1

Hi everyone,
I have a problem with my angular custom directive in ionic.
I created a flip book effect moving and resizing some HTML div with text and gradient color (for shadows).
It uses css animation, changing class when need to animate (turn page).
I used hardware accelerated animations (like translate3d), but when I load the application on tablet or smartphone, it make an horrible flickering.

I tried to split animations, doing one of them per time, and it’s quite smooth, but when I put all animations toghether performance becomes very bad (especially one that just affect width, however with a translate3d(0,0,0) to use hardware acceleration).

Here is my component in a Plunker code view: http://plnkr.co/edit/mgBGe1IsYZ3NEW6BNnUz?p=preview

Anybody can help me to figure out this problem? I’m quite desperated, I tried everything I kown and I found out on the Internet, but it keep giving troubles.

Thank you all for your patience,
Niccolò

2

So a lot of that has to do with how the browser handles animating gradients and shadows.
A lot of what you’re trying to do causes jank in mobile devices. Animating gradients and shadows aren’t hardware accelerated.

3

Thank you for your reply @mhartington
Unfortunately, also removing gradients and shadows elements flickering keep showing.
Any other solutions?