Почему эта анимация делает экран шире на моем iPad?

У меня была игра с анимированным топ-баром на моем новом сайте. Он отлично работает в Firefox, но не в IE/Chrome/Safari. Вот JSFiddle кода (по какой-то причине он не хочет работать здесь, но по крайней мере вы можете видеть, что я делаю)

http://jsfiddle.net/CHSS8/10/

CSS:

#sky-header {
  background: #5ba0f8;
  width: 100%;
  height: 100px;
}
#nav-bar-top {
  background: #228D00;
  width: 100%;
  height: 50px;
  padding-top: 4px;
  padding-left: 10px;
}

JQuery:

toggleSun();
setTimeout( function() { toggleCloud1(); },1000);
setTimeout( function() { toggleCloud2(); },2000);
function toggleSun() {
    $("#sun").animate({
        left: ($(document).width()/2)+"px"
        }, 10000, 'linear', function() {
            $("#sun").animate({
                left: ($(document).width()/2 - 30)+"px"
                }, 10000, 'linear', function() { toggleSun(); });
        });
}
function toggleCloud1() {
    $("#cloud1").animate({
        left: ($(document).width()+200)+"px"
        }, 50000, 'linear', function() {
            $("#cloud1").css('left',"-400px");
            toggleCloud1();
        });
}
function toggleCloud2() {
    $("#cloud2").animate({
        left: ($(document).width()+200)+"px"
        }, 43000, 'linear', function() {
            $("#cloud2").css('left',"-600px");
            toggleCloud2();
        });
}

Я предполагаю, что это имеет какое-то отношение к тому, как я плаваю по элементам, а затем делаю left отрицательные пиксели, чтобы они left с экрана (прежде чем они вернутся к началу и перезапустите)

Я знаю, что могу сделать это с помощью анимации CSS3, но я не мог заставить их работать (по какой-то причине ничего не произошло). Я также не уверен, насколько легко сделать элемент переходом от одного конца к другому, даже на разных экранах.