web-dev-qa-db-fra.com

Nouveau bug de position fixe sur iOS8

J'ai un site avec un en-tête fixe et des barres latérales coulissantes. 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 se déplace légèrement vers le haut en fonction de la profondeur du défilement. J'ai besoin que ça reste fixe.

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

Les pièces principales sont un en-tête, une barre latérale et le contenu principal. L'en-tête est fixé en haut de l'écran à l'aide d'une position fixe et possède un index z qui le maintient au-dessus du contenu lorsque vous faites défiler.

La barre latérale est fixée sur le côté gauche de l'écran et est initialement masquée en étant traduite à gauche par sa propre largeur.

Pour ouvrir la barre latérale, l’en-tête, le contenu et les barres latérales sont convertis à droite par la largeur de la barre latérale.

Encore une fois, cela fonctionne parfaitement sur iOS7 et tous les autres navigateurs prenant en charge translate3d, et il fonctionne même correctement dans iOS8 en orientation paysage. Mais dans iOS8 en mode portrait, l'en-tête fixe va glisser de l'écran en fonction du défilement de l'utilisateur.

En outre, l’inspecteur Safari indique que les éléments de menu à l’écran sont décalés par rapport à leurs positions prévues. C'est à dire. La sélection d'un élément dans l'inspecteur met en surbrillance une zone de l'écran qui est décalée par rapport à l'emplacement réel où elle est rendue.

Quelqu'un d'autre a-t-il rencontré cela? Quelqu'un sait un correctif?

ÉDITER: L’inspecteur pense que l’en-tête de position fixe est exactement où il devrait être, même s’il est en fait repoussé de l’écran.

iosscrollpositionios8fixed
9
Mike Snare

Un peu tard pour la fête, mais en ajoutant

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

Corrige le défilement décalé sur les éléments fixes décalés (par exemple, à gauche: 20 pixels) dans iOS 8.

4
MaximeDesRoches

J'ai eu un problème similaire sur iOS en utilisant plusieurs éléments à position fixe et une navigation hors-ligne animée CSS. Sur une longue page, la "dérive" vers le haut était un bloqueur, car elle augmentait au point de masquer la gâchette de navigation, rendant impossible la fermeture du menu. J'ai beaucoup essayé de trouver une solution et j'ai opté pour une solution de contournement: faites défiler vers le haut avant d'animer. (#ocnTrigger est le déclencheur de mon menu hors-zone.)

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

J'essayais de faire quelque chose de similaire (voir ici et ici ) puis j'ai constaté qu'Apple avait publié une note technique recommandant d'éviter le positionnement fixe. Je jure que cela a bien fonctionné sous iOS 7, mais maintenant avec iOS8, il ne «colle plus». 

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

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

Voir aussi: Correction de div en bas sans utiliser la position css

0
iX3