Comment réparer l'élément d'entrée iOS 11 dans un bug de modal fixe

D'un bug dans le code HTML entrées dans le nouvellement libéré iOS 11 est de créer des problèmes pour les sites web qui ont des éléments d'entrée en fixe les conteneurs. Voici exactement ce qui se passe et des solutions de contournement possibles.

Si vous en avez un dans un conteneur fixe et il est assez près du bas de l'écran forcer le navigateur pour faire défiler pour faire de la place pour le clavier, le curseur est placé à l'extérieur de la saisie de texte.
C'était un grave problème pour nous, car l'une de nos fonctionnalités de base repose sur la saisie de l'utilisateur par le biais d'un fixe boîte de dialogue modale.

C'était un problème critique pour nous, car l'une de nos fonctionnalités de base repose sur la saisie de l'utilisateur par le biais d'un fixe boîte de dialogue modale.

Comment réparer l'élément d'entrée iOS 11 dans un bug de modal fixe

source d'informationauteur Amjad Jafar

  1. 5

    Pour l'instant il n'y a pas parfaite solution pour elle. Deux temporaires options:

    1. Changement de la boîte de dialogue modale à position: absolute (Non recommandé)
    2. Essayer de supprimer l'arrière-plan de défilement lorsque modal/boîte de dialogue s'ouvre et le restaurer en cas de dialogue fermer.

    Détail pour l'option 2: Par exemple, vous pouvez configurer votre racine div (ou n'importe quoi qui a une barre de défilement) overflowY='hidden' lorsque la boîte de dialogue s'ouvre, et le changer en arrière overflowY='' lorsque la boîte de dialogue se ferme. (Inconvénient: le navigateur pour faire défiler vers le haut lorsque vous ouvrez la boîte de dialogue modale)

    Remarque:

    1. N'oubliez pas de détecter OS/navigateur lorsque la gâchette de bugs, sinon vous allez probablement rencontrer des problème dans IE.
    2. Suivre ce fil d'obtenir la plus récente mise à jour sur cette question.
  2. 3

    Cette solution m'a aidé à fixer dans n'importe quelle modèle IOS.

    Première chose cible uniquement les appareils 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 plugin de mise en cache, vous devez vider le cache.

    Espère que cela vous aidera.

  3. 2

    Je ne sais pas si c'est exactement le même problème que vous rencontrez, mais cette solution a fonctionné pour moi:

    .modal-ouvert {position:fixed;}

    iOS 11 Safari modal bootstrap zone de texte à l'extérieur du curseur

  4. 0

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

  5. 0

    Cette solution m'a aidé à résoudre IOS11 problème de saisie:
    https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x

    Elle corrige aussi ennuyeux fond de défilement, lorsque vous essayez de faire défiler à l'intérieur modal 🙂

    Résumé:
    Vous ajoutez position:fixed pour le corps, la trésorerie de la fenêtre.pageYOffset et faites défiler jusqu'à encaissé position après popup fermer pour empêcher le mouvement vers le haut de la page.

  6. 0

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

    J'ai trouvé ça assez facile, avec seulement quelques lignes de code. Donc, ce que je fais c'est que je suis l'évolution du fixed conteneur à absolutemais seulement lorsque le formulaire de connexion est ouverte, il fait de la magie avec l'aide d'un marqueur.

    jQuery:

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

    CSS:

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

    Donc maintenant l'en-tête fixe, devient absolue. Si c'est iOS et uniquement lorsque la boîte de connexion est ouverte.

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

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

  7. 0

    Essayez cela, 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');
});