web-dev-qa-db-fra.com

Comment réparer l'élément d'entrée iOS 11 dans le bug des modaux fixes

Un bogue dans les entrées HTML dans iOS 11, récemment publié, crée des problèmes pour les sites Web dont les éléments d’entrée sont dans des conteneurs fixes. Voici exactement ce qui se passe et quelques solutions possibles.

Si vous avez un conteneur fixe et qu'il est suffisamment proche du bas de l'écran pour obliger le navigateur à faire défiler l'écran pour laisser de la place au clavier, le curseur est placé en dehors de la saisie de texte . nous, car l’une de nos fonctionnalités de base repose sur la saisie de l’utilisateur via un dialogue modal fixe.

Il s’agissait d’un problème critique dans la mesure où l’une de nos fonctionnalités essentielles repose sur la saisie de l’utilisateur via un dialogue modal fixe.

 enter image description here

jquerycssinputmodal-dialogios11
15
Amjad Jafar

Pour l'instant, il n'y a que no solution parfaite. Deux options temporaires:

  1. Changer le dialogue/modal en position: absolute (Non recommandé)
  2. Essayez de supprimer le défilement en arrière-plan lorsque modal/dialog s'ouvre et le restaurer à la fermeture du dialogue. 

Détail de l'option 2: par exemple, vous pouvez définir votre div racine (ou tout ce qui comporte une barre de défilement) sur overflowY='hidden' lorsque la boîte de dialogue s'ouvre et le redéfinir overflowY='' lorsque la boîte de dialogue se ferme. (Inconvénient: le navigateur défilera en haut lorsque vous ouvrirez une boîte de dialogue/modale)

Remarque: 

  1. N'oubliez pas de détecter le système d'exploitation/navigateur lorsque le déclencheur est corrigé, sinon vous rencontrerez probablement un problème dans IE.
  2. Suivez ce fil de discussion pour obtenir la dernière mise à jour concernant ce problème.
6
Ming

Cette solution m'a aidé à réparer n'importe quel modèle IOS.

La première chose que vous ciblez est IOS avec ce code.

//target ios
var isMobile = {
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    }
}
if(isMobile.iOS()) { 
      jQuery('body').addClass('Apple-ios');
}

puis mettez ce code dans votre css:

body.Apple-ios.modal-open {
  position: fixed;
  width:100%;
}

Si vous utilisez WordPress et le plug-in de cache, vous devez vider tout le cache. 

J'espère que cela vous aidera.

4
Sajjad Ahmad

Je ne suis pas sûr que ce soit exactement le même problème que vous, mais cette solution a fonctionné pour moi:

.modal-open {position: fixe;}

iOS 11 Safari bootstrap modal zone de texte en dehors du curseur

2
John Nimis

Ce bogue affecte également les entrées iframe, je pense donc que le correctif que j'ai trouvé aidera également les modaux.

Tout ce qui reste à faire est d’appliquer le css suivant à l’entrée dans l’iframe.

input:hover {
   cursor: text
}

Voici un exemple: https://codepen.io/ryanoutloud/project/full/AEKGjj

0
Ryan L.

Cette solution m'a aidé à résoudre le problème d'entrée IOS11: https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x

Il corrige également le défilement en arrière-plan ennuyeux, lorsque vous essayez de faire défiler l'intérieur de modal :)

Résumé: Vous ajoutez la position: fixée au corps, fenêtre cash.pageYOffset et défilez jusqu'à la position encaissée après la fermeture de la fenêtre pour empêcher tout déplacement en haut de la page.

0
Мария Хаак

J'ai eu le même problème, jetez un oeil à ma réponse, peut-être que cela vous aidera: https://stackoverflow.com/a/46954486/8775824

0
Dan

J'ai eu cette erreur iOS avec un formulaire de connexion à l'intérieur d'un élément fixed en-tête/bannière. Il y a une button dans l'en-tête pour ouvrir la fenêtre modale avec le formulaire de connexion . La fenêtre modale réelle est absolute positionnée, mais l'élément en-tête/bannière est fixed.

Je l'ai résolu assez facilement avec seulement quelques lignes de code. Donc, ce que je fais est que je change le conteneur fixed en absolute, mais seulement lorsque le formulaire de connexion est ouvert, il fait la magie avec le marqueur de saisie.

jQuery:

$('.ios #mob-login').on('click', function(){
  $('body').toggleClass('login-open');
});

CSS:

.ios body.login-open #banner-wrapper {
  position: absolute;
}

Alors maintenant, l'en-tête fixe devient absolu. S'il s'agit d'iOS et uniquement lorsque la boîte de connexion est ouverte.

Cela pourrait résoudre votre problème si vous rencontrez des problèmes similaires.

Ps. Vous avez besoin d'un script pour détecter et écrire le nom de la classe ios/ios11 en <html> ou similaire, mais je ne vais pas en parler dans cet article. Vous pouvez trouver de nombreuses solutions pour cela.

0
JoakimB

Essayez ceci il peut vous aider

//HTML
<head>
     <style>
          .ios-11-body-fixed {
             position: fixed;
             width: 100%;
          } 
     </style>
</head>

//jQuery
$("#leadgen-modal").on('show.bs.modal', function () {
    $('body').addClass('ios-11-body-fixed');
});
$('#leadgen-modal').on('hidden.bs.modal', function () {
           $('body').removeClass('ios-11-body-fixed');
});
0
Dharmesh Rakholia