web-dev-qa-db-fra.com

iOS 9 Safari: changer un élément en position fixe pendant le défilement ne peindra pas avant que le défilement ne s'arrête

J'ai développé un site et profité du plugin plutôt bon jQuery Sticky Kit . Il fonctionne en commutant la propriété position en fixed et inversement, le cas échéant. Fonctionne très bien dans le bureau et de manière acceptable dans le mobile.

Ou du moins c'était le cas. iOS 9 a un nouveau comportement: si le position d’un élément change de static/relative/absolute à fixed alors que le L’animation de défilement est en cours, l’élément devient invisible jusqu’à ce que le défilement soit arrêté. Curieusement, le changement inverse (de fixed à quelque chose d’autre) s’effectue sans problème.

Un exemple de travail peut être trouvé sur la page d'accueil du plugin . La barre de navigation noire ("Exemples de référence") est supposée être collante. A l'origine, il s'agit de staticly positionné au milieu de la page. Lorsque vous faites défiler l'écran, il devient fixed et (sous iOS 9) jusqu'à ce que le défilement s'arrête. Le comportement dans les navigateurs de bureau et iOS 8 est correct.

J'espérais un peu les solutions de contournement CSS typiques: forcer une transformation 3D, désactiver la visibilité de la face arrière, etc., obscurcir les propriétés propriétaires, ... Mais rien ne semble fonctionner.

Sommes-nous sur le point d'oublier complètement les éléments "collables" maintenant que cela fonctionnait?

ioscsscss-positionmobile-safariios9
67
randombumper

J'avais le même problème et je pouvais me débrouiller avec le vieux truc "forcer une transformation 3D". Il suffit de définir l’élément dont vous allez changer la position pour avoir une propriété de transformation de translate3d(0px,0px,0px). Assurez-vous que cela est fait avant que la propriété position ne soit modifiée.

77
Nathan G

La seule solution que j’ai trouvée fonctionner correctement était de désactiver les traductions de l’index z sur enfants directs de l’élément fixe, par exemple:

.is-sticky > * {
    -webkit-transform: translateZ(0);
}
17
Seth Warburton

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

Donc, placez juste après votre corps une balise div.fixed-fix:

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

maintenant ça marche! Le div fix-fix DOIT avoir une couleur d'arrière-plan, parce que sinon cela ne fonctionnera pas ...

4
Arnaud van Zandwijk

jQuery Sticky Kit et d’autres plugins similaires, même bien codés, présentent ce type de comportement sur iOS 9, et ce n’est pas la première fois que cela se produit. Le point principal ici est que Firefox Safari et Safari Mobile supportent l'expérimental position: sticky;, Google (Chrome) l’a également fait mais, en raison de problèmes d’intégration, a dû le désactiver temporairement. Vous pouvez en lire plus à ce sujet ici . Cela dit, je suppose que très bientôt, position: sticky; fera partie de la spécification CSS et sera supportée par tous les principaux navigateurs. Je pense donc que la meilleure approche pour résoudre ce problème consiste à utiliser un polyfill au lieu d’un plugin. Bien sûr, un polyfill ne couvrira pas toutes les fonctionnalités et fonctionnalités offertes par ces plugins. Néanmoins, dans de nombreuses situations, utiliser un polyfill fera le travail, en tant que solution robuste et efficace supportée par tous les principaux navigateurs. À mon avis, c'est la voie à suivre, pour l'instant. Personnellement, j'utilise stickyfill bien que je sois sûr que d'autres polyfills à l'état sauvage feront l'affaire. Tout ce que je peux dire, c'est que, depuis que j'ai commencé à utiliser un polyfill au lieu de plugins, je n'ai pas eu de problèmes de compatibilité de navigateur.

3
user3724945

Ajoutez ceci à votre élément fixe
tilisation d'un mélange:@include transform(translate3d(0px,0px,0px))
tilisation de CSS:translate3d(0px,0px,0px)

0
Yaron