Nouvelle position Fixe un bug sur iOS8

J'ai un site avec un en-tête fixe et coulissant, barres de navigation. Avec iOS7 en orientation portrait, l'en-tête fixe reste fixe lorsque la barre latérale est visible, mais sur iOS8 l'en-tête pousse légèrement à la hausse, en fonction de combien vous défiler. J'en ai besoin pour rester fixe.

Voir ce jsbin: http://jsbin.com/xuyevi/2/

Les pièces principales sont un en-tête, la barre latérale, et le contenu principal. L'en-tête est fixé à la partie supérieure de l'écran à l'aide de la position fixe et a un z-index qui la tient au-dessus du contenu lorsque vous êtes défilement.

La barre latérale est fixée sur le côté gauche de l'écran, et est initialement masqué par le fait d'être traduit gauche par sa propre largeur.

Pour ouvrir la barre latérale, chaque en-tête, le contenu, et des barres de navigation sont convertis à droite par la largeur de la barre latérale.

Encore une fois, cela fonctionne parfaitement sur iOS7 et tous les autres navigateurs qui prennent en charge translate3d, et en plus il fonctionne correctement dans iOS8 quand en orientation paysage. Mais dans iOS8 dans le portrait, l'en-tête fixe de glisser hors de l'écran en fonction de la distance vers le bas à l'utilisateur de faire défiler.

Plus, à l'aide de Safari inspecteur montre que les éléments du menu à l'écran sont compensés à partir de leur position. I. e. la sélection d'un élément dans l'inspecteur met en évidence une zone de l'écran qui est déduite à partir de l'emplacement actuel où il est rendu.

Quelqu'un d'autre a rencontré ce? Quelqu'un connais une solution?

EDIT: L'inspecteur pense que la position fixe de l'en-tête est exactement là où il devrait être, même si c'est réellement obtenir poussé hors de l'écran.

Je rencontre cette. J'ai remarqué que lors de l'utilisation de position: fixed de la largeur du conteneur était sur le 4/3 plus grand que son parent. À l'aide de position: -webkit-sticky n'ont pas ce problème, mais n'a pas fonctionné dans mon cas (avait des problèmes avec l'opacité / background-image). Si/Quand je résoudre cela, je vais poster une réponse ici.
J' résolu ceci pour notre site et passer d'un "push" pour un 'glisser' effet. Le contenu principal maintenant, reste en place tandis que la barre latérale et en-tête de la diapositive en cours. Je préfère revenir à la push si je peux, mais pour l'instant je n'ai pas le temps de dépenser de jongler avec ce qui semble être un bug dans iOS8.

OriginalL'auteur Mike Snare | 2014-10-15

  1. 4

    Un peu en retard à la fête, mais l'ajout de

    html, body {
    overflow-x: hidden;
    overflow-y: scroll;
}

    Va corriger le décalage de défilement sur les éléments fixes qui sont compensés (eg. left:20px) dans iOS 8.

    Cela a fonctionné pour moi, cependant il a créé certains problèmes de performances pour moi, très lent défilement sur certaines pages.
    essayez ce qui suit: overflow-y: auto; -webkit-overflow-scrolling: touch; // momentum scrolling on iOS
    Merci pour l'astuce: pour info produit déjà livré avec une solution différente, mais je vais certainement donner un coup la prochaine fois que j'en ai besoin.

    OriginalL'auteur MaximeDesRoches

  2. 1

    J'ai eu un problème similaire sur iOS position fixe à l'aide de plusieurs éléments et un CSS animation off-canvas nav. Sur une longue page de la hausse de la "dérive" est un bloqueur parce qu'il a finalement augmenté au point où elle a caché la valeur liquidative de déclenchement, la rendant impossible à fermer le menu. J'ai essayé énormément pour trouver une solution et se sont installés sur une solution: revenir en arrière et de haut avant d'animer. (#ocnTrigger est mon off-canvas menu déclencheur.)

    $('#ocnTrigger').click(function(){
    $('body').animate({
      scrollTop: 0
    }, 0);
});

    OriginalL'auteur pixelslave

  3. 0

    J'ai essayé de faire quelque chose de similaire (voir ici et ici) alors constaté que Apple a publié une note technique de recommander que la correction du positionnement être évitée. Je vous jure, il a bien fonctionné dans iOS 7, mais maintenant, avec iOS8, il n'est plus "bâtons".

    Ce problème semble étroitement liée à la définition de cette balise meta:

        <meta name="viewport" content="width=device-width">

    Voir aussi: Fix div à fond sans l'aide de css position

    On dirait que c'est enfin pris en charge dans iOS8.1. caniuse.com/#feat=css-fixed

    OriginalL'auteur iX3