iOS 9 Safari: modification d'un élément à la position fixe pendant le défilement de ne pas la peinture jusqu'à ce défilement s'arrête

J'ai été le développement d'un site et de prendre avantage de la plutôt bonne jQuery Kit de Collant plugin. Il fonctionne en commutation de la position propriété fixed et à l'arrière le cas échéant. Fonctionne très bien sur le bureau et donc acceptable dans le mobile.

Ou au moins qu'il a utilisé pour. iOS 9 est livré avec un nouveau comportement: si le position d'un élément change de static/relative/absolute à fixed tandis que le défilement de l'animation est en cours, l'élément devient invisible jusqu'à ce que après le défilement s'arrête. Curieusement, le mouvement inverse (à partir de fixed pour que ce soit d'autre) est effectuée sans problèmes.

Un exemple peut être trouvé sur la page d'accueil du plugin. Le noir de la barre de navigation ("Exemples de Référence") est censé être collante. À l'origine, c'est staticly positionné dans le milieu de la page. Comme vous le faites défiler vers le bas, il devient fixed et (dans iOS 9) disparaît jusqu'à ce que de défilement s'arrête. Comportement dans les navigateurs de bureau et iOS 8 est correct.

J'ai été un peu en espérant pour le CSS solutions de contournement: forcer une transformation 3D, la désactivation de la backface la visibilité et la comme obscure, propriétés exclusives, ... Mais rien ne semble fonctionner.

Sommes-nous oublier "stickable" éléments complètement, maintenant qu'elle était en train de travailler?

  • Si vous êtes en développement pour iOS, vous devez utiliser la meilleure solution, position: sticky dans le CSS, même derrière un préfixe. Vous pouvez garder votre plugin jQuery pour tout le reste et utiliser le natif CSS solution pour iOS, où il prend en charge (7+, si je me souviens correct).
  • Eh bien, je suis en développement pour tout, mais cela permet une approche mixte. Merci!
  • A quelques heures d'essai et d'erreur, je peux conclure que le soutien pour l'collant en-têtes dans iOS est assez bonne, mais tout se détraque quand vous arrivez à collant colonnes. Un peu trop vert encore.
InformationsquelleAutor randombumper | 2015-09-30
  1. 76

    J'ai eu ce même problème et a réussi à pirater autour d'elle à l'aide de la vieille "de la force d'une transformation 3D" truc. Il suffit de régler l'élément que vous allez pour changer la position d'avoir une transformation de la propriété de translate3d(0px,0px,0px). Assurez-vous de le faire avant que la propriété position est modifiée.

    • translate3d() causé quelques problèmes d'implantation pour moi, mais translateZ(0) travaillé un charme
    • J'ai eu translate3d() sur la même classe CSS, le truc c'est qu'il doit être là AVANT la modification de la position ou de l'ajout de la nouvelle classe. Merci pour cette!
    • cela ne semble pas fonctionner pour moi sur iOS 10... eh bien, il fonctionne, mais je peux le casser en le faisant glisser comme l'élément fixe 'bâtons' et ensuite de changer l'orientation de ma glisser dans l'autre sens 🙁
    • N'a pas fonctionné pour moi sur iOS 9.2.1 (iPad 3).
    • Malheureusement, cela ne semble pas fonctionner pour moi, sur Safari 9.0. Rien ne fait. cacher/montrer, l'ajout d'un élément, l'ajout d'un CSS animation, l'accès à offsetHeight. J'ai essayé tous les trucs que je peux trouver, et encore que la barre d'en-tête ne sera pas repeindre dans la position fixe jusqu'à ce que j'ai supprimer mon défilement du doigt de l'écran 🙁
    • J'ai littéralement passé des jours à essayer de comprendre comment résoudre le style des changements dans mon collant en-tête ne prenant pas affecter jusqu'à ce que le défilement complètement à l'arrêt, ce qui rend tout chose regarder maladroit et bizarre. L'ajout de transform: translateZ(0); à la valeur par défaut de l'élément de style fixe et maintenant le style de transitions passent en douceur pendant le défilement. Merveilleux! Merci tout le monde! (Testé sur Chrome et Safari sur l'iPad Mini avec iOS 10.0.2)

    InformationsquelleAutor Nathan G
  2. 17

    La seule solution que j'ai trouvé pour fonctionner correctement était de désactiver le z-index des traductions sur enfants directs du point fixe, par exemple:

    .is-sticky > * {
    -webkit-transform: translateZ(0);
}
    • Cela a fonctionné pour moi, merci!
    InformationsquelleAutor Seth Warburton
  3. 4

    J'ai résolu ce problème avec un supplément fixe de l'élément. Après quelques tests, j'ai découvert que c'est le premier élément qui se fixe a ce problème. Les 2ème, 3ème, etc fonctionne très bien sur les appareils iOS.

    Alors, mettez juste après votre corps openingtag un div.fixe-fix:

    .fixed-fix {
    position:fixed;
    top:-1px; 
    height:1px; 
    width:100%; 
    background:white;
}

    maintenant ça fonctionne!
    Le fixe-fixe div DOIT ont un backgroundcolor, parce que sinon ça ne marchera pas...

    • cela ne semble pas fonctionner pour moi sur iOS10. Peut-être qu'ils 'fixe' il ? J'espérais vraiment qu'il allait parce que je suis de trouver le translate option très glitch
    InformationsquelleAutor Arnaud van Zandwijk
  4. 3

    jQuery Collant Kit et autres plugins, même en étant bien codé, de la présentation de ce genre de comportement sur iOS 9, et ce n'est pas la première fois que quelque chose comme ce qui se passe. Le point principal ici est que Firefox Safari et Safari Mobile support expérimental position: sticky;, de sorte que fait Google (Chrome), mais, en raison de problèmes d'intégration, a eu le désactiver temporairement, vous pouvez en lire plus à ce sujet ici. Cela dit, ma conjecture est que, très bientôt, position: sticky; fera partie de la spécification CSS et pris en charge par tous les principaux navigateurs, donc je pense que la meilleure approche pour résoudre ce problème est d'utiliser un polyfill au lieu d'un plugin. Bien sûr, un polyfill ne couvre pas toutes les caractéristiques et les fonctionnalités que ces plugins offrir. Néanmoins, dans de nombreuses situations, à l'aide d'un polyfill va faire le travail, comme une robuste solution efficace et soutenue par tous les principaux navigateurs. À mon avis c'est la voie à suivre, pour l'instant. Personnellement, j'utilise stickyfill même si je suis sûr que d'autres polyfills dans la nature fera l'affaire. Tout ce que je peux dire, c'est que, depuis que j'ai commencé à l'aide d'un polyfill au lieu de plugins, je n'ai pas eu de problèmes de compatibilité navigateur.

    • Cela a très bien fonctionné pour moi. Polyfills FTW.
    InformationsquelleAutor user3724945
  5. 0

    Ajouter à votre élément fixe

    À l'aide d'un Mélange: @include transform(translate3d(0px,0px,0px))

    À l'aide de CSS: translate3d(0px,0px,0px)

    • à l'Aide de "SCSS" est tout simplement faux. Ce que vous recommandons d'utiliser un mixin, probablement à partir de la boussole...
    • À l'aide de SCSS est pas mal c'est simplement une façon de vous sauver de la peine d'avoir à les saisir à chaque navigateur préfixe.
    • .... urm.... sauf que c'est [probablement] juste un iOS.question " et vous n'avez donc pas besoin de s'inquiéter à propos des préfixes
    InformationsquelleAutor Yaron