Vertikale Scroll-Animation 'springt' auf iOS

Question

Ich arbeite an einer site, die CSS3-Animationen verwendet.

Ich habe auf iOS die Comic-Untertitel 'springen' bemerkt, die meiner Meinung nach durch die Adressleiste verursacht wird, die eines der window properties verwendet, um die Position der Beschriftung zu berechnen.

Quellcode ist hier verfügbar: https://gitlab.com/ashleyconnor/adventurersclubcomic

Wenn ich in meiner Annahme richtig bin. Gibt es eine genaue Möglichkeit, die iOS-Adressleiste auszugleichen, sodass es keinen Sprung (plötzlichen Anstieg) in einem dieser Werte gibt?

Answer 1

Ich habe Ihr Repo geklont und konnte den Jitter bei der Fenstergrößenanpassung sowohl in Firefox als auch in Chrome reproduzieren. Nach ein paar Minuten debuggine finde ich das Problem tatsächlich in deiner index.js-Datei.

Sie aktualisieren das Enllax-Plugin bei jeder Änderung der Fenstergröße vollständig. Dies scheint unnötig zu sein.

Wenn Sie die überzähligen Anrufe an die enllax Funktion wie folgt entfernen:

$(document).ready(function() { 
// function enllax() { 
    $('#start').enllax({ 
     type: 'foreground', 
     ratio: 0.5, 
     direction: 'vertical' 
    }); 
// $(window).scroll(); 
// }; 

    $('#begin').click(function() { 
     $('html, body').animate({ 
      scrollTop: $("#panel1").offset().top 
     }, 1000); 
    }); 

// enllax(); 

    // And trigger the scroll event on resize to deal with changes 
    // in the responsive layout 
    $(window).on('resize', $(window).trigger('scroll')); 
}); 

Mit diesem Update stoppt der Jitter auf Resize in allen Browsern habe ich installiert. Es muss noch in iOS getestet werden, da ich keine Apple-Hardware habe, um es zu testen, aber ich vermute, dass es das Problem dort auch beheben sollte.