3D transforms (translate3D) seem to cause sluggish jQuery animations on mobile
I am using 3D CSS translation and 3D scale for responsive navigation menu. On touch devices, more specifically the iPhone, it calls separate jQuery animations on the same page to perform sluggishly, almost as if it was strobing when animating. Can anyone shed some light on this issue?
If it matters, I use SASS:
nav {
left: 0;
@include transform( translate3d(-100%, 0, 0) );
@include backface-visibility;
.nav__block {
@include transition( -webkit-transform 500ms ease );
@include transition-delay( ease, 0s );
@include transform( translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9) );
@include transform-origin( 50% 0% );
}
}
}
Below is a jQuery snippet that works sluggishly:
this.container.filter(':visible').animate({
'left': '-=' + self.childWidth + 'px'
}, 300).clearQueue();
Thanks for your time in advance!
source to share
The jQuery animation feature is most likely the culprit for this scenario as it does not take advantage of the hardware acceleration required to run smoothly on mobile devices such as the iPhone.
You can use the jQuery Animate Enhanced plugin which overrides the jQuery animation function and uses css3 transitions instead. Here's a demo:
JS Fiddle Demo
$(".container").animate({
'left': '-=' + 400 + 'px',
'useTranslate3d': true
}, 500);
I have tested iPad. In fact, if you remove the reference to the jQuery Animate Enhanced library, you will see performance degradation on mobile.
source to share