web-dev-qa-db-fra.com

L'entrée iOS concentrée à l'intérieur du parent fixe arrête la mise à jour de la position des éléments fixes

Ce qui suit se produit sur Mobile Safari iOS 6.1.2

Étapes à reproduire

Créer un position: fixed élément avec un <input type="text"> élément à l'intérieur.

Résultat réel

  1. Entrée - non focalisée

    La position des éléments fixes est correcte lorsque l'entrée n'est pas focalisée.

  2. Entrée - focalisée

    Lorsque l'entrée est focalisée, le navigateur entre dans un mode spécial dans lequel il ne met plus à jour la position des éléments fixes (tout élément positionné fixe, pas seulement le parent de l'entrée) et déplace la fenêtre entière vers le bas afin de rendre l'entrée l'élément parent se trouve au centre de l'écran.

    Voir la démo en direct: http://jsbin.com/oqamad/1/

Résultat attendu

La position des éléments fixes est toujours respectée.

Correction ou solution de contournement?

Tout indice sur la façon de forcer Safari à afficher correctement les éléments fixes serait utile.

Je préférerais une solution de contournement qui n'implique pas l'utilisation de position: absolute et en définissant un gestionnaire d'événements onscroll.

ioscssinputfocusfixed
36
Valentin Agachi

C'est un bug bien connu sur Safari, à la fois sur iPad et iPhone.

Une solution de contournement consiste à changer la position en absolu pour tous les éléments définis avec une position fixe.

Si vous utilisez Modernizr, vous pouvez également cibler les appareils mobiles de cette façon:

code jQuery

$(document).ready(function() {

  if (Modernizr.touch) {

      $(document)

        .on('focus', 'input', function(e) {
            $('body').addClass('fixfixed');
        })

        .on('blur', 'input', function(e) {
            $('body').removeClass('fixfixed');
        });

      }

});

CSS

Si je veux cibler uniquement l'en-tête et le pied de page par exemple, qui sont définis avec une position fixe, lorsque la classe 'fixfixed' est ajoutée au corps, je peux changer la position en absolu pour tous les éléments avec une position fixe.

.fixfixed header, .fixfixed footer {
  position: absolute;
}
7
Alessandro Incarnati

Oui, c'est spécifiquement un problème de safari iOS depuis la v5. Si vous utilisez Chrome sur iOS, vous remarquerez que cela fonctionnera bien. Le bodge que j'utilise pour résoudre ce problème consiste à créer et à ajouter un élément de style au corps, puis à le supprimer, puis à effectuer la se concentrer sur l'élément.

Ne me demandez pas pourquoi cela fonctionne, juste trop d'heures d'essais et d'erreurs!

J'ai également remarqué qu'après la première fois que cela est résolu, vous n'avez pas à effectuer l'astuce de style pour les éléments positionnés fixes suivants

0
Richard Lailey

Position: Correction a beaucoup de bogues bien connus, vous pouvez les vérifier ici: article Remysharp . Vous pouvez probablement encore corriger certains d'entre eux en utilisant les réponses à cette question: CSS "position: fixed;" dans iPad/iPhone?

Bonne chance!

0
Raspu