L'animation de défilement vertical 'saute' sur iOS

Question

Je travaille sur un site qui utilise des animations CSS3.

J'ai remarqué sur iOS les 'sauts' des sous-titres qui, je crois, sont causés par la barre d'adresse qui change l'un des window properties utilisés pour calculer la position de la légende.

Le code source est disponible ici: https://gitlab.com/ashleyconnor/adventurersclubcomic

Si je ne me trompe pas dans mon hypothèse. Existe-t-il un moyen précis de compenser la barre d'adresse iOS pour qu'il n'y ait pas de saut (augmentation soudaine) dans l'une de ces valeurs?

Answer 1

J'ai cloné votre repo, et j'ai pu reproduire la gigue sur le redimensionnement de la fenêtre dans Firefox et Chrome. Après quelques minutes de debuggine, je pense que le problème est dans votre fichier index.js.

Vous actualisez complètement le plugin enllax chaque fois que les fenêtres sont redimensionnées. Cela semble être inutile.

Si vous supprimez les appels en excès à la fonction enllax comme ceci:

$(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')); 
}); 

Avec cette mise à jour, la gigue arrête le redimensionnement dans tous les navigateurs, j'ai installé. Il reste à tester sous iOS car je n'ai pas de matériel Apple pour le tester, mais je pense qu'il devrait aussi y remédier.