Le défilement de l'iPad Safari fait disparaître et réapparaître les éléments HTML avec un retard

Je développe actuellement une application Web utilisant html5 et jQuery pour iPad Safari. Je rencontre un problème dans lequel de grandes zones de défilement font apparaître les éléments hors écran après un certain temps lorsque je fais défiler vers eux.

Ce que je veux dire par là, c'est que si j'ai une rangée d'images (ou même un div avec un dégradé) qui est hors écran, lorsque je fais défiler vers le bas (ou vers le haut), le comportement attendu est que l'élément apparaisse à l'écran comme J'y fais défiler.

Cependant, ce que je vois, c'est que l'élément n'apparaît pas tant que je ne lève pas mon doigt de l'écran et que la molette de défilement termine toutes ses animations.

Cela me pose un problème très perceptible, donnant à l'ensemble un aspect saccadé, bien que ce ne soit pas le cas. J'imagine que l'iPad Safari essaie de faire quelque chose pour économiser de la mémoire. Y a-t-il un moyen pour que je puisse empêcher cette agitation de se produire. De plus, j'apprécierais également que quelqu'un puisse faire la lumière sur ce que l'iPad Safari tente réellement de faire.

Vous devez tromper le navigateur pour utiliser l'accélération matérielle plus efficacement. Vous pouvez le faire avec une transformation 3d vide:

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

En particulier, vous en aurez besoin sur les éléments enfants qui ont une position:relative;déclaration (ou, tout simplement, faites-le pour tous les éléments enfants).

Pas une solution garantie, mais assez réussie la plupart du temps.

Astuce du chapeau: https://web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/

C'est la réponse complète à ma question. J'avais initialement marqué la réponse de @Colin Williams comme la bonne réponse, car cela m'a aidé à trouver la solution complète. Un membre de la communauté, @Slipp D. Thompson a édité ma question, après environ 2,5 ans que je l'ai posée, et m'a dit que j'abusais du format de questions et réponses de SO. Il m'a également dit d'afficher séparément ceci comme réponse. Voici donc la réponse complète qui a résolu mon problème:

@Colin Williams, merci! Votre réponse et l'article auquel vous avez créé un lien m'ont incité à essayer quelque chose avec CSS.

Donc, j'utilisais translate3d avant. Cela a produit des résultats indésirables. Fondamentalement, cela couperait et ne rendrait PAS les éléments qui étaient hors écran, jusqu'à ce que j'interagisse avec eux. Donc, fondamentalement, en orientation paysage, la moitié de mon site qui était hors écran n'était pas affichée. Ceci est une application Web iPad, à cause de laquelle j'étais dans un correctif.

L'application de translate3d à des éléments relativement positionnés a résolu le problème de ces éléments, mais d'autres éléments ont arrêté le rendu, une fois hors écran. Les éléments avec lesquels je ne pouvais pas interagir (illustration) ne seraient plus jamais rendus, sauf si je rechargeais la page.

La solution complète:

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

Maintenant, bien que ce ne soit peut-être pas la solution la plus «efficace», c'est la seule qui fonctionne. Mobile Safari ne rend pas les éléments qui sont hors écran, ou parfois de manière erratique, lors de l'utilisation -webkit-overflow-scrolling: touch. À moins qu'un translate3d ne soit appliqué à tous les autres éléments qui pourraient sortir de l'écran en raison de ce défilement, ces éléments seront coupés après le défilement.

Alors, merci encore et j'espère que cela aidera une autre âme perdue. Cela m'a sûrement beaucoup aidé!

Cibler tous les éléments sauf html: a *:not(html) causé des problèmes sur d'autres éléments dans mon cas. Il a modifié le contexte d'empilement, provoquant la rupture de certains z-index.

Nous devrions mieux essayer de cibler le bon élément et de l'appliquer -webkit-transform: translate3d(0,0,0)uniquement.

Edit: parfois translate3D(0,0,0)cela ne fonctionne pas, nous pouvons utiliser la méthode suivante, en ciblant le bon élément:

@keyframes redraw{
    0% {opacity: 1;}
    100% {opacity: .99;}
}

// ios redraw fix
animation: redraw 1s linear infinite;

Lorsque translate3d ne fonctionne pas, essayez d'ajouter de la perspective. Ça marche toujours pour moi

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

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

L'ajout -webkit-transform: translate3d(0,0,0)statique à un élément ne fonctionne pas pour moi.

J'applique cette propriété de manière dynamique. Par exemple, lorsqu'une page défile, je mets -webkit-transform: translate3d(0,0,0)sur un élément. Ensuite, après un court délai, je réinitialise cette propriété, c'est-à-dire que -webkit-transform: none cette approche semble fonctionner.

Merci, @Colin Williams de m'avoir pointé dans la bonne direction.

J'ai eu le même problème avec iscroll 4.2.5 sur ios7. L'élément de défilement entier 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" iscroll. La solution est venue de donner des "position:relative; z-index:1000;display:block"propriétés css à l'ensemble du conteneur qui contient l'élément scroll et il n'est pas nécessaire de donner translate3d aux éléments enfants.

À la fois translate3dpeut ne pas fonctionner, dans ces cas perspectivepeut être utilisé

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

Je suis sûr que je viens de résoudre ce problème avec:

overflow-y: auto;

(Vraisemblablement, overflow: auto;cela fonctionnerait aussi en fonction de vos besoins.)

Il existe des cas où une rotation est appliquée et / ou un index Z est utilisé.

Rotation : une déclaration existante de -webkit-transformfaire pivoter un élément peut ne pas être suffisante pour résoudre également le problème d'apparence (comme -webkit-transform: rotate(-45deg)). Dans ce cas, vous pouvez utiliser -webkit-transform: translateZ(0px) rotateZ(-45deg)comme astuce ( attention à la rotation Z ).

Index Z : avec la rotation, vous pouvez définir une z-indexpropriété positive , comme z-index: 42. Les étapes ci-dessus décrites sous "Rotation" étaient dans mon cas suffisantes pour résoudre le problème, même avec le vide translateZ(0px). Je soupçonne cependant que l'indice Z dans ce cas peut avoir causé la disparition et la réapparition en premier lieu. Dans tous les cas, la z-index: 42propriété doit être conservée - cela -webkit-transform: translateZ(42px)ne suffit pas.

C'est un problème très courant auquel sont confrontés les développeurs et qui est principalement dû à la Safari'spropriété de ne pas recréer les éléments définis comme position : fixed.

Donc, changez la propriété de position ou un piratage doit être appliqué comme mentionné dans d'autres réponses.

Lien1

Lien2

Dans mon cas (une application iOS Phonegap), l'application de translate3d à des éléments enfants relatifs n'a pas résolu le problème. Mon élément défilable n'avait pas de hauteur définie car il était absolument positionné et je définissais les positions supérieure et inférieure. Ce qui l'a corrigé pour moi a été d'ajouter une hauteur min (de 100 pixels).

J'ai eu le même problème avec une ancienne version de Fancybox. La mise à niveau vers la v3 résoudra votre problème OU vous pouvez simplement ajouter:

html, body {
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}

J'ai rencontré ce problème dans un projet Framework7 & Cordova. J'ai essayé toutes les solutions ci-dessus. Ils n'ont pas résolu mon problème.

Dans mon cas, j'utilisais plus de 10 animations css sur la même page avec une rotation infinie (transformation). J'ai dû supprimer les animations. Cela va maintenant avec le manque de certaines fonctionnalités visuelles.

Si les solutions ci-dessus ne vous aident pas, vous pouvez commencer à éliminer certaines animations.

l' -webkit-transform: translate3d(0, 0, 0);astuce n'a pas fonctionné pour moi. Dans mon cas, j'avais demandé à un parent:

// parent
height: 100vh;

Changer cela en:

height: auto;
min-height: 100vh;

Résolution du problème au cas où quelqu'un d'autre serait confronté à la même situation.

Dans mon cas, CSS n'a pas résolu le problème. J'ai remarqué le problème lors de l'utilisation de jQuery re-rendre un bouton.

$("#myButton").html("text")

Essaye ça

$("#myButton").html("<span>text</span>")