CSS3 Animation is delayed on Android Webview


#1

I’ve got this code to trigger the animation:

$ionicGesture.on('dragstart', function(event) {
	ionic.requestAnimationFrame(function() {
		//do something
	});
}, elem);

I’ve got the element animating by following SCSS:

@include transition($transition-time ease-in-out);
@include transition-property(transform);
@include transform(translate3d($x, $y, 0));

It’s work perfectly on ios7. However, i got a noticeable delay before the element animating on Android Webview.
Any idea to fix this?

Many thanks,


#2

What version of android are you testing this on?


#3

Currently on Samsung S4 Android 4.4.2. I think i’ve found the reason now.
I tried to bind ‘touchstart’ & ‘touchend’ event and the delay has gone.

In my test, ‘touchstart’ is fired 170ms earlier than ‘dragstart’.