8

I'm trying to use CSS3 animations in Android WebView but I'm getting a very annoying delay when starting the animation (roughly 500ms).

The animation runs smoothly, no lag, but it has the delay at start. Since there is no lag, I assume that's not a performance issue. Or it could be?

It's not the default 300ms onclick delay, I've already changed to ontouchstart and when I do anything else than animations/transitions, there is no delay. Only with these two.

It's not the animation-delay property as well, I've already set it to 0.

Any possible explanation/solution?

PS: The animation/transition I'm trying to run is with transform: translateX() property. Before, I was trying with left: Xpx, but it was lagging during the animation. With transform, there is no lag, but there is the delay.

Harpreet
  • 2,990
  • 3
  • 38
  • 52
Pedro Barros
  • 1,326
  • 1
  • 12
  • 19

3 Answers3

4

I had the same problem and failed to find a reasonable solution. I've tried different approches and these are my conclusions:

  • making animation longer makes it look more smooth, but doesn't reduce the delay at the beginning
  • turning hardware acceleration OFF makes animation faster (delay is also reduced) but some frames are being dropped and animation isn't smooth anymore
  • changing all translate3d to translateX/translateY/translateZ - no visual difference
  • changing animation into multiple transitions controlled via JavaScript (transitionEnd event) makes it slower with multiple hiccups on the way (each time when transitionEnd is fired).

My guess is that CSS animations are just slow on Android and require some pre-computation to display them; hence the delay at the beginning. We'll probably need to wait for Chrome to became the default browser for Android.

Konrad Dzwinel
  • 36,825
  • 12
  • 98
  • 105
  • As much as I hate to admit it, because supporting old devices and Android versions is still a requirement for most developers, we might just need to go back to JavaScript animations, hoping for better performance. – Itai Bar-Haim Oct 09 '13 at 13:14
0

I'm not sure it would help with the delay, but perhaps you should use translate3d(x,0,0) instead of translateX, because 3D transformation run on hardware.

I can't find the reference for that now, but I remember reading an article about it in the Google Android HTML Developers site.

Itai Bar-Haim
  • 1,686
  • 16
  • 40
  • 1
    Are you sure that only `translate3d` gets accelerated? I think that whole family of `translate` functions is accelerated. Anyway, this is not a good solution for this problem - I've tried both `translate3d` and `translateX` and found no visible difference. – Konrad Dzwinel Jun 03 '13 at 14:30
  • Well, if you said you saw no visible difference than I guess my suggestion is not the solution to your problem. About if only `translate3d` is accelerated, than that is what I read in several places, including Google's explanations of correct, faster CSS. It was weird for me as well, and perhaps it was changed in later versions of Chrome, and I can't be sure it is so in all browsers anyway. – Itai Bar-Haim Jun 16 '13 at 15:52
0

I was having the same issues on stock browser. Turns out that you can add this to the block you're animating:

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

This should smooth out the animations, making them start sooner and also removing a flicker before and after the animation.

Chris Bishop
  • 1