ScrollLeft und ScrollTop auf Ipad mit animate-Kette (jQuery)

Question

Ich habe mir den Kopf zerbrochen, warum ich bei jedem neuen Browser meinen Code nicht auf dem iPad, sondern nur auf halbem Weg funktioniert.

Als erstes ist hier die Seite, die ich zu machen Arbeit versuchen: http://madovar.com

Ich versuche, wenn ich auf dem Kontakt mit uns auf dem oberen Link klicken, nach rechts zu bewegen und dann auf den Boden, mit animieren von jQuery, es funktioniert hervorragend in FF, IE8 + und Chrome, Safari.

Aber wenn ich auf das iPad gehe, geht es nach rechts, wie es sich gehört, dann scrollt es ein wenig runter und geht direkt nach links und animiert dann den Scrolldown zu einem leeren Teil meines Codes.

Hier ist mein Skript:

jQuery(document).ready(function($) { 
$('.contact').bind('click', function (event) { 

$('html, body').animate({ 
scrollLeft: "+=2200"    
}, 1500, 'easeInOutExpo').delay(400).animate({ 
scrollTop: "+=2000"   
}, 3000, 'easeInSine');   
event.preventDefault(); 

}); 
}); 

Bitte helfen Sie mir, ich habe das Internet und Stackoverflow für diese Suche.

Dank

Answer 1

Ich sehe einige von Ihrer Syntax in Ihrem Meta-Tag für das Ansichtsfenster verursachten Fehler. Wenn Sie Ihre Seite mit den Chrome-Entwicklertools überprüfen, sollten auch die Fehler angezeigt werden. Ihr Meta-Tag soll wie folgt aussehen:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 

Beachten Sie, dass die richtige Syntax Kommas und nicht Semikolons zwischen den Werten im Content-Attribute verwendet. Wenn Sie dies beheben, können Sie Ihre Probleme auf dem iPad beheben.

Answer 2

Ich hatte dieses Problem in letzter Zeit. Anscheinend gibt es einen Bug in Mobile Safari, der scrollTop und scrollLeft nicht erlaubt, auf den Elementen body oder html animiert zu werden. Ein Cross-Browser-Fix, die ich in einer anderen Stackoverflow Antwort gefunden (kann den Link jetzt nicht gefunden):

var left; 
$('body,html').stop().animate({pageYOffset: topValue, pageXOffset: leftValue}, { 
    duration: 500, 
    easing: 'swing', 
    step: function(now, fx) { 
     if (fx.prop == 'pageXOffset') { 
      left = now; 
     } else if (fx.prop == 'pageYOffset') { 
      window.scrollTo(left, now); 
     } 
    } 
}); 

dies hier Posting bei sonst jemand stolpert über diese Frage in Zukunft.