Jquery and css3 animations lag in Safari 5

Question

I have an issue with all jquery animations in Safari 5. My system is windows.

I have struggles with a basic image fade slider, but still have a little flickering on it. With this image slider I have click events that moves 2 pages simultaniously accross the page, the active page moving right and the inactive page moving left.

The script I use can be found here: fiddle

The relevant part is that I change classes to make use of css3 animations to move the elements, but have previously used jquery with the same end result.

$('.page.inactive').addClass('moveRight').find('#blurWall').addClass('moveLeftBlur');
$('.page.active').addClass('moveLeft').find('#blurWall').addClass('moveRightBlur');

These added classes contain the following styles:

.moveRight 
{
    -webkit-animation-name: moveRight;
    -webkit-animation-duration:2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes moveRight 
{
    from {  left:-1286px; }
    to {    left:107px; }
}
.moveLeft 
{
    -webkit-animation-name: moveLeft;
    -webkit-animation-duration:2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes moveLeft 
{
    from {  left:107px; }
    to {    left:-1286px;   }
}

The site is located at:fiddle

All of the images have been minimized for web use. The above link is just to view the effect. Works perfectly in Chrome.

Any ideas how to get rid of the lag?

Answer 1

The reason why using jQuery or the CSS animation show little difference is because jQuery does exactly the same as your CSS: It moves things with left/right positioning, which isn't very effective as its not hardware accelerated, and in your example (Which is very image heavy and have a background-position changing constantly - the slider thingie) it hurts on the FPS.

Solution:

Make your animation use transform instead which forces hardware acceleration:

@-webkit-keyframes moveRight {
  from {
    -webkit-transform: translate3d(-1286px, 0,0);
  }
  to {
    -webkit-transform: translate3d(107px, 0,0);
  }
}

@-webkit-keyframes moveLeft {
  from {
    -webkit-transform: translate3d(107px, 0,0);
  }
  to {
    -webkit-transform: translate3d(-1286px, 0,0);
  }
}

It will give an significantly increase in the FPS - I did a little benchmark on your page with it comparing the left/right vs translate:

The right version where it peaks below 30fps sometimes is of course the Left/Right positioning. The transform method has a few below 30fps but it may well be some of all the other things going on on your page - like the auto scrolling and the image slider thingie.