Question

I have a jQuery animation that renders smoothly in all browsers except Safari (tested only on Windows 7).

It’s important that it will support Safari. Anyone has a clue why is that?

By the way, this is not the first time i come across this problem.

This is the code I’m using:

setInterval(function() {
  nextObstacle = createObstacle();
  animateLoops(nextObstacle,direction);
  direction = (direction == '+=3') ? ('-=8') : ('+=3');
}, 2000);

function animateLoops(o,direction) {
  o.animate ({
    'top': '+=1',
    'left': direction,
    'height': '+=5',
    'width': '+=5'
  }, 100, 'linear', function() {
    if (o.outerWidth()<200)   // keep moving
      animateLoops(o,direction);         
    else {  // check success
      o.fadeOut();
    }
  });
}

<style>
#game-div {
  width:590px;
  height:700px;
  background: url(images/background-1604.png);
  position:relative;
  /* cursor: url(images/plane-1604.png), auto;*/
}

.loop {
  position:absolute;
  top:230px;
  left:270px;
  width: 30px;
  height:30px;
}
</style>

You can see it live here: http://www.israelinsidethemovie.com/plane-game/

Answer 1

I’ve tested your page on Safari 5.1.4 and 5.1.1 on Windows XP and can confirm that it is a lot less smooth in Safari compared to other browsers.

I use jquery lightboxes and they are also very jerky in Windows Safari compared to other browsers.

I have used both colorbox and fancybox and they are both jerky in Safari.

So my conclusion – Windows Safari has problems with animations in jquery. Sorry no solution though.

Hopefully all OK in safari on a mac (as per Tats_innit comment) – which is more important than windows