Safari iPad défilement provoque éléments HTML de disparaître et de réapparaître avec un retard

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 pour elle.

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

Ce qui provoque 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.

  • Ce problème/solution m'a aidé à résoudre un problème avec la jPanelMenu 1.3 CSS Transforme version, qui s'est avéré tout sur mon site invisibie jusqu'à ce que j'ai ajouté de l'extrait ci-dessus.
  • À l'aide de *:non(html) s'appliqueront de la translate3d à tous les autres aspects de votre site et je ne le recommande pas. Il va provoquer des images dans les onglets à disparaître comme vous le faites défiler vers le bas, etc, les bugs que vous pourriez utiliser à voir sur vos images 3d sera désormais présent dans d'autres aspects de votre site.
  • J'ai eu un peu de <svg> éléments qui ont été en présentant similaire retard de dessin/rendu. Malheureusement, *:not(html) { ... } conduit à toutes sortes de comportements bizarres, comme @JonathanTonge souligné peut se produire. Toutefois, en sélectionnant uniquement les <svg> éléments et en utilisant translate3d(0, 0, 0,); semble avoir résolu mon défilement des questions.
  • Sauf pour des cas d'utilisation spécifiques, c'est poubelle. Vraiment bousille les dispositions qui dépendent de la position absolue des éléments.
  • S'il vous plaît poster des réponses que de réponses, pas de “MODIFIER”dans votre question. Je sais que vous aimez votre réponse meilleures, et c'est très bien, mais StackOverflow a un Q&Un format qui fonctionne le mieux lorsque les Q sont distincts l'Un de l'.
InformationsquelleAutor codeBearer | 2012-03-21
  1. 176

    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.

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

    • J'ai essayé aussi. Malheureusement, l'ajout d'un translate3d découper des éléments exceptionnels qui ont été affichée correctement avant. J'ai aussi besoin de l'accélération matérielle pour un couple d'objets à l'écran et se devait d'être animé de "fly-in" sur l'écran. J'ai été en utilisant jQuery animate(), ce qui était super lent. Je suis passé à l'aide de l'accélération matérielle. Bien qu'qui a accéléré l'animation, elle a produit des résultats irréguliers, dans le sens que certains des éléments d'enfant de la mère (animation) div ont été coupés. Ce n'était pas arrivé quand j'ai été en utilisant animate().
    • Williams, vous venez de faire ma journée! 😀
    • Wow, c'est horrible, mais efficace. Je vous remercie.
    • Le lien est cassé. Nouveau lien: cantina.co/thought_leadership/... mise en Cache: web.archive.org/web/20131005175118/http://cantina.co/2012/03/06/...
    • Or foutu star homme! Je l'ai ajouté à tous mes li éléments dans un div scrollable. Poof. Travaillé.
    • Fantastique!!!! Sauvé mon bacon. Pour les personnes qui ont des questions sur l'application de cette globalement, essayez de la réduire et de les appliquer à la div conteneur qui a les éléments suivants (qui ne sont pas rendus). Ainsi, au lieu de *:pas de html (), #myDivContainer:pas de html () {...} et ensuite appliquer myDivContainer comme l'Id de la div. Moche, mais efficace en réduisant les problèmes mondiaux. BTW j'ai dû le faire pour la dernière version de Safari sur les dernières OSX (pas mobile/ipad uniquement).
    • Merci! A travaillé pour moi.
    • Je vous aime!!! <3333
    • Merci à vous, vous juste m'a aidé à résoudre un très semblables et ennuyeux problème!
    • N'aide pas pour moi..
    • Si l'on applique cela à la page, les éléments fixes sont réduits.
    • J'ai appliqué seulement pour les éléments touchés et cela a fonctionné! Dans mon cas, c'était des images à l'intérieur d'un conteneur overflow:hidden et défilement à l'horizontale: .elem-affected{ -webkit-transform: translate3d(0, 0, 0);} je n'ai pas besoin de l' :non(html) bits, vous ne savez pas si il est logique lors de l'application spécifique, par exemple. html de classe de toute façon.

    InformationsquelleAutor Colin Williams
  2. 64

    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 que j'abuse de SORTE Q & Un 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 de -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!

    • Wow. Merci pour cette. Il m'a sauvé une énorme quantité de maux de tête pour mon phonegap/cordova app. Dans mon cas, j'ai dû changer *:not(html) à body *
    • tout simplement l'application de -webkit-transform: translate3d(0, 0, 0); pour le problème de l'élément a fonctionné pour moi. Dans mon cas, j'ai été en utilisant ScrollMagic
    • Rien de tout cela a fonctionné pour moi non plus. Dès que j'ai faites défiler jusqu'à un certain point, ils ne sont plus visibles des trucs au-dessus de la fenêtre devient munged, ainsi que certains éléments dans la fenêtre d'affichage. Je remarque une très légère mais non équivoque "secousse", alors que c'est le défilement après lequel les éléments d'obtenir arrosé. (C'est à dire: lisse-nerveux--lisse comportement, comme c'est hiccuping pendant le défilement.) C'est sur iPad.
    • BTW, je viens de découvrir que sur un iPad Air 2, lors d'un précis sur l'écran élément (une barre de navigation, dans ce cas) sort de l'écran, l'appareil "recharge" qui bloquent--uniquement à l'aide de la version large, pas l'original de la moyenne, c'est que la page est chargée avec. Ce que le...
    • Dans le cas où quelqu'un rencontre le même folie que moi--légèrement différente de ce qui est décrit sur cette page--j'ai trouvé que l'utilisation de $(window).width() au lieu de window.innerWidth en jQuery fait toute la différence pour iOS. Qui sait.
    InformationsquelleAutor codeBearer
  3. 12

    Ciblant tous les éléments, mais en html : *:not(html)
    causé des problèmes sur d'autres éléments dans mon cas. Il a modifié le contexte d'empilement, provoquant un z-index à briser.

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

    Edit : parfois, le translate3D(0,0,0) ne fonctionne pas, on peut utiliser la méthode suivante, le ciblage de la droite de l'élément :

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

//ios redraw fix
animation: redraw 1s linear infinite;
    • J'ai été confronté à la même question. Vous pouvez utiliser body * sélecteur au lieu de *:not(html). Il vous permettra de résoudre la question.
    • Bravo pour la suggestion de cibler les éléments plutôt que de polluer le tout avec de l' *
    InformationsquelleAutor Guillaume Gautier
  4. 6

    Lorsque le translate3d ne fonctionne pas, essayez d'ajouter de la perspective. Il travaille 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

    • saint-c$#@ enfin une solution angulaire/ionique. -webkit-perspective: 1000;
    • Ahh Sauvé ma journée. +1 pour vous 😉
    • Cela fait mon iOS plantage du navigateur.
    • -webkit-perspective: 1000; l'ai fait pour moi - merci
    InformationsquelleAutor Fellipe Lima
  5. 2

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

    J'applique cette propriété de manière dynamique. Par exemple, lorsque la page défile à l'écran, j'ai mis -webkit-transform: translate3d(0,0,0) sur un élément. Puis, après un court délai, je réinitialiser cette propriété, qui est, -webkit-transform: none
    Cette approche semble fonctionner.

    Merci, @Colin Williams pour me pointer dans la bonne direction.

    • Cette astuce m'a beaucoup aidé, car ces styles bing certains effets secondaires indésirables, j'ai l'habitude de vouloir éviter. J'ai donc utiliser évènements touchstart/touchend des événements à ajouter et à enlever. Merci!
    InformationsquelleAutor Alexander Poleschuk
  6. 1

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

    • J'ai utilisé cette technique pour résoudre un problème similaire sur Android et Chrome. Le défilement Vertical semble faire mieux que quand j'ai essayé le translate3d correctif. Dans mon cas, <body> élément est ce que j'ai utilisé pour le défilement et une version simplifiée de travail: body { position: relative; z-index: 0; }
    InformationsquelleAutor yudarik
  7. 0

    Je suis sacrément sûr que je viens de résoudre ce avec:

    overflow-y: auto;

    (Probablement juste overflow: auto; serait trop de travail en fonction de vos besoins.)

    • Il n'a rien fait pour moi alors que l'on a accepté la réponse n'a donc probablement un scénario différent
    InformationsquelleAutor David Notik
  8. 0

    Il y a des cas où un rotation est appliqué et/ou un Z index est utilisé.

    Rotation: Un existant déclaration de -webkit-transform pour faire pivoter un élément peut-être pas assez pour lutter contre l'apparition de problème (comme -webkit-transform: rotate(-45deg)). Dans ce cas, vous pouvez utiliser -webkit-transform: translateZ(0px) rotateZ(-45deg) comme un truc (l'esprit de la rotationZ).

    Z index: en collaboration avec la rotation vous pouvez définir un positif z-index propriété, comme z-index: 42. Les étapes ci-dessus décrites à la rubrique "Rotation" ont été dans mon cas assez pour résoudre le problème, même avec le vide translateZ(0px). Je soupçonne cependant que les Z-index dans ce cas peut avoir causé qui disparaissent et réapparaissent en premier lieu. En tout cas, le z-index: 42 propriété doit être maintenu -- -webkit-transform: translateZ(42px) seul n'est pas suffisant.

    InformationsquelleAutor Stefan Zurfluh
  9. 0

    C'est un problème très commun rencontrés par les développeurs et qui est due principalement aux Safari's propriété de ne pas recréer des éléments définis comme position : fixed.

    Donc soit changer la position de la propriété ou certains hack doit être appliquée comme mentionné dans d'autres réponses.

    Link1

    Link2

    InformationsquelleAutor arqam
  10. 0

    Dans mon cas (un iOS app Phonegap), l'application de translate3d relative des éléments d'enfant n'a pas résolu le problème. Mon élément déroulant n'est pas la hauteur car il était absolument positionné et j'ai été de définir le haut et le bas. Qu'est-ce résolu pour moi a été l'ajout d'un min-height (de 100px).

    InformationsquelleAutor b4tch
  11. 0

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

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