Barre latérale Le menu de navigation clignote pendant le défilement sur l'iPhone/iPad

Question

Depuis la dernière mise à jour de l'iPhone/iPad, le menu de navigation de la barre latérale clignote lorsque vous faites défiler vers le haut ou le bas. J'ai essayé plusieurs approches, mais rien ne fonctionne vraiment.

Le premier essai était d'empêcher le défilement (corps), lorsque le menu est ouvert:

.overflow { 
    position:relative; 
    overflow:hidden; 
    height:100%; 
} 

Malheureusement, cela ne résout pas le problème, donc je l'ai essayé:

.overflow { 
    position:fixed; 
    overflow:hidden; 
    height:100%; 
} 

Cette fonctionne mais quand un utilisateur ouvre le menu, la page saute en haut et la barre d'adresse apparaît également. IMO pas une bonne expérience utilisateur.

J'ai aussi essayé d'ajouter à plusieurs éléments:

div { 
    -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ 
      backface-visibility: hidden; 
} 

Donc, maintenant que je pouvais soit essayer de le résoudre avec l'approche de position fixe ou essayer d'éviter le vacillement. Je ne sais pas pourquoi mais le 'débordement: caché' ne marche pas vraiment sur les iPhones.

Quelqu'un at-il une bonne solution pour cela?

Answer 1

Cela a quelque chose à voir avec la «transition». Par exemple. n'utilisez pas 'translateX()' ... utilisez translate3d() pour activer l'accélération matérielle et l'ajouter à l'encapsuleur animé. Résolu mon problème:

.animClass { 
    -webkit-transform: translate3d(0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    -webkit-perspective: 1000; 
} 

Merci à: https://davidwalsh.name/translate3d

Answer 2

Normalement, ne pas spécifier la largeur et la hauteur du menu de navigation provoque un tel effet.