Propriété CSS3 webkit-overflow-scrolling:touch ERROR

Question

IOS 5 offre aux concepteurs de sites web une nouvelle propriété -webkit-overflow-scrolling:touch qui utilise l'accélérateur matériel de l'appareil iOS pour fournir un défilement natif pour une div défilante.

Lorsqu'il est mis en œuvre sur notre site en cours de développement, il fonctionne, mais pas très bien. Je pense qu'il y a peut-être un problème de CSS, c'est pourquoi je pose la question ici.

Les éléments suivants violon vous montrera qu'il fonctionne parfaitement

Si vous allez sur notre site en développement, vous trouverez le même panneau sous l'onglet installations mais sur iOS, bien que le défilement soit parfait, la section débordante n'est pas affichée avec des images littéralement coupées en deux.

http://www.golfbrowser.com/courses/mill-ride/

Je n'ai aucune idée de la façon de résoudre ce problème http://www.golfbrowser.com/photo.PNG

Answer 1

Comme @relluf l'a indiqué, l'application de transitions 3D sur l'élément relatif corrige le problème. Cependant, j'ai investigué un peu plus et il semble que l'application des transitions 3D sur l'élément relatif corrige le bug. -webkit-transform: translateZ(0px) fonctionne également (c'est ce que fait Google sur le conteneur de carte gmaps) et il n'est pas nécessaire qu'il se trouve sur l'élément relativement positionné, mais seulement sur le descendant direct de l'élément défilable.

Ainsi, si vous ne souhaitez pas tenir manuellement une liste de tous les endroits où le correctif est nécessaire, vous pouvez très bien le faire :

element {
    -webkit-overflow-scrolling: touch;
}

element > * {
    -webkit-transform: translateZ(0px);
}

Answer 2

Quel bougre ils ont laissé s'échapper ici. J'ai essayé toutes sortes de solutions de contournement jusqu'à ce que je trouve finalement la seule propriété nécessaire pour que les éléments soient correctement rendus dans un fichier -webkit-overflow-scrolling:touch div : position: static

Les éléments positionnés de manière relative et absolue sont toujours coupés à la limite et complètement absents (à l'exception de l'espace vide) à l'extérieur de cette limite. Si vous modifiez la propriété de position dynamiquement, de statique à absolue, seule la partie visible de la fenêtre de la division déroulante reste affichée, quel que soit le décalage.

Answer 3

J'ai également rencontré ce problème. Je l'ai résolu en appliquant le code CSS suivant aux éléments parents :

-webkit-transform: translate3d(0, 0, 0);

Cependant, j'ai remarqué que cela ralentissait le rendu et pouvait sélectionner d'autres éléments de saisie lorsque l'élément de saisie touché est déplacé au centre de la vue (par Safari/iOS).

Answer 4

J'ai étudié ce bug en profondeur, j'ai également créé un jsfiddle et je l'ai soumis à Apple dans un rapport de bug. Veuillez vous reporter à la page suivante : iOS5 Les images disparaissent lors du défilement avec webkit-overflow-scrolling : touch Dès qu'Apple me répondra, je le signalerai sur ce sujet afin que vous puissiez rester informé de ce bug très ennuyeux.

Answer 5

J'ai également rencontré un problème où le défilement par débordement avec -webkit-overlfow-scrolling réglé sur touch entraînait des problèmes de redéfinition avec les éléments positionnés. Dans mon cas, j'avais une liste dont les éléments individuels avaient un positionnement relatif de sorte que je pouvais utiliser le positionnement sur leurs éléments enfants. Avec le CSS ci-dessus sur iOS 5, lorsque l'utilisateur faisait défiler le contenu caché, il y avait un délai momentané avant que l'écran ne soit redessiné pour passer en revue les éléments. C'était vraiment ennuyeux. Heureusement, j'ai découvert que si je donnais au nœud parent une position relative, le problème était résolu.