Le défilement de l'iPad Safari entraîne la disparition et la réapparition des éléments HTML

Question

Je suis en train de développer une application web en utilisant html5 et jQuery pour iPad Safari. Je suis en cours d'exécution dans un problème où les grandes zones de défilement cause les éléments qui sont hors de l'écran apparaît après un délai lorsque je scroll vers le bas.

Ce que je veux dire par là, si j'ai une ligne d'images (ou même un div avec un dégradé) qui est à l'écran, quand je scroll vers le bas (ou le haut), le comportement attendu est celle de l'élément à apparaître à l'écran comme je suis de défilement.

Cependant, ce que je constate, c'est que l'élément n'apparaît pas jusqu'à ce que je lève mon doigt de l'écran et la molette termine toutes ses animations.

Ceci est à l'origine un super problème visible pour moi, faire toute chose regarder agitée, bien qu'il ne l'est pas. J'imagine que l'iPad Safari est en train de faire quelque chose pour économiser de la mémoire. Est-il de toute façon dans laquelle je ne peux empêcher cette hachée-ness de passe. En outre, j'apprécierais aussi si quelqu'un peut jeter de la lumière sur ce que l'iPad Safari est en train d'essayer de faire.

Merci une tonne pour votre aide à l'avance! :-)

Cheers!

Answer 1

Vous avez besoin de tromper le navigateur pour utiliser l'accélération matérielle de manière plus efficace. Vous pouvez faire cela avec un vide de transformation 3d:

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

En particulier, vous aurez besoin de l'enfant, les éléments qui ont un position:relative; déclaration (ou, il suffit d'aller tous dehors et de le faire pour tous les éléments enfants).

Pas une garantie de correction, mais assez réussi la plupart du temps.

Astuce chapeau: http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

Answer 2

C'est la réponse complète à ma question. J'avais initialement marqué @Colin Williams réponse la bonne réponse, comme il m'a aidé à obtenir à la solution complète. Un membre de la communauté, @Slipp D. Thompson édité ma question, après environ 2,5 ans de m'avoir demandé, et m'a dit d'abuser AINSI de la Q & A de format. Il m'a aussi dit à la poste comme la réponse. Alors, voici la réponse qui a résolu mon problème:

@Colin Williams, merci! Votre réponse et l'article que vous avez lié à m'a donné une avance d'essayer quelque chose avec les CSS.

Donc, j'ai été en utilisant translate3d avant. Il produit des résultats indésirables. Fondamentalement, il serait de couper et de ne PAS RENDRE les éléments qui ont été hors de l'écran, jusqu'à ce que j'ai interagi avec eux. Donc, en gros, en orientation paysage, la moitié de mon site qui était à l'écran n'a pas été montré. C'est un iPad web app, grâce à laquelle j'ai été dans un correctif.

L'application de translate3d à la position relative des éléments résolu le problème pour ces éléments, mais d'autres éléments arrêté rendu, une fois hors de l'écran. Les éléments que je ne pouvais pas interagir avec (œuvres d'art) ne serait jamais rendre de nouveau, sauf si j'ai rechargé la page.

La solution complète:

*:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
}

Maintenant, bien que cela pourrait ne pas être la meilleure solution, c'était le seul qui fonctionne. Le navigateur Safari Mobile ne rend pas les éléments qui sont hors de l'écran, ou rend parfois erratique, lors de l'utilisation d' -webkit-overflow-scrolling: touch. À moins d'un translate3d est appliqué à tous les autres éléments qui pourraient aller à l'écran grâce à ce livre, ces éléments seront coupés après le défilement.

Alors, encore merci, et espérons que cela aide certains autres, la perte de l'âme. Cela a certainement aidé moi beaucoup de temps!

Answer 3

-webkit-transform: translate3d(0,0,0) fonctionne bien uniquement pour les balises div mais ne fonctionne pas pour iframe :(.

Pour plus de détails s'il vous plaît visitez:

http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/comment-page-1/ Un lien utile pour le débordement de div, mais pas pour iframe

Answer 4

J'ai eu le même problème avec iscroll 4.2.5 sur ios7. L'ensemble de l'élément de défilement disparaît simplement. J'ai essayé d'ajouter translate3d(0,0,0) comme cela a été suggéré ici, cela a résolu le problème, mais cela a désactivé l'effet "snap" d'iscroll. La solution a fourni des propriétés "position:relative; z-index:1000;display:block" css à tout le conteneur qui contient l'élément scroll et il n'est pas nécessaire de donner translate3d aux éléments enfants.