3D transforms (translate3D) appear to be causing sluggish jQuery animations on mobile devices

Question

I am using a CSS translate 3D and scale 3D for a responsive navigation menu. On touch devices, more specifically, iPhone, it is causing separate jQuery animations on the same page to perform sluggishly, almost as if it strobes when animating. Can anyone shed any light on this issue?

If it is of any relevance, I am using 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 snippet of the jQuery which is operating sluggishly:

    this.container.filter(':visible').animate({
       'left': '-=' + self.childWidth + 'px'
    }, 300).clearQueue();

Thank you for your time in advance!

Answer 1

jQuery's animate function is most likely the culprit in this scenario since it does not take advantage of hardware acceleration, which is needed for smooth performance on mobile devices such as the iPhone.

You could use the jQuery Animate Enhanced plugin, which overrides the jQuery animate function and uses css3 transitions instead. Here is a demo:

JS Fiddle Demo

$(".container").animate({
       'left': '-=' + 400 + 'px',
    'useTranslate3d': true
    }, 500);

I tested with an iPad. In fact, if you remove the reference to the jQuery Animate Enhanced library, you will see the performance degradation on a mobile device.