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

Question

Avec safari iOS 11, le curseur de la boîte de texte de saisie est en dehors de la boîte de texte de saisie. Nous n'avons pas compris pourquoi il y a ce problème. Comme vous pouvez le voir, ma zone de texte focalisée est une zone de saisie de texte d'email mais mon curseur est en dehors de cette zone. Ceci n'arrive qu'avec iOS 11 Safari

Answer 1

J'ai résolu le problème en ajoutant position:fixed dans le corps du texte lors de l'ouverture d'une fenêtre modale. J'espère que cela vous aidera.

Answer 2

Personnellement, position: fixed défilement automatique vers le haut . C'est assez ennuyeux !

Pour ne pas pénaliser les autres appareils et versions Je n'applique ce correctif qu'aux versions appropriées d'iOS.

---

**VERSION 1 - Correction de tous les modaux**

Pour le javascript/jQuery

$(document).ready(function() {

    // Detect ios 11_x_x affected  
    // NEED TO BE UPDATED if new versions are affected
    var ua = navigator.userAgent,
    iOS = /iPad|iPhone|iPod/.test(ua),
    iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

    // ios 11 bug caret position
    if ( iOS && iOS11 ) {

        // Add CSS class to body
        $("body").addClass("iosBugFixCaret");

    }

});

Pour le CSS

/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }

---

**VERSION 2 - Modaux sélectionnés uniquement**

J'ai modifié la fonction pour qu'elle ne se déclenche que pour les modales sélectionnées avec une classe .inputModal

Seules les fenêtres modales avec des entrées devraient être touchées pour éviter le défilement vers le haut.

Pour le javascript/jQuery

$(document).ready(function() {

    // Detect ios 11_x_x affected
    // NEED TO BE UPDATED if new versions are affected 
    (function iOS_CaretBug() {

        var ua = navigator.userAgent,
        scrollTopPosition,
        iOS = /iPad|iPhone|iPod/.test(ua),
        iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

        // ios 11 bug caret position
        if ( iOS && iOS11 ) {

            $(document.body).on('show.bs.modal', function(e) {
                if ( $(e.target).hasClass('inputModal') ) {
                    // Get scroll position before moving top
                    scrollTopPosition = $(document).scrollTop();

                    // Add CSS to body "position: fixed"
                    $("body").addClass("iosBugFixCaret");
                }
            });

            $(document.body).on('hide.bs.modal', function(e) {
                if ( $(e.target).hasClass('inputModal') ) {         
                    // Remove CSS to body "position: fixed"
                    $("body").removeClass("iosBugFixCaret");

                    //Go back to initial position in document
                    $(document).scrollTop(scrollTopPosition);
                }
            });

        }
    })();
});

Pour le CSS

/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }

Pour le HTML Ajouter la classe inputModal à la modale

<div class="modal fade inputModal" tabindex="-1" role="dialog">
    ...
</div>

Nota bene La fonction javascript est maintenant auto-invocante

---

**MISE A JOUR iOS 11.3 - Bug corrigé **

Depuis iOS 11.3, le bug a été corrigé. Il n'est pas nécessaire de tester la présence de OS 11_ en iOS11 = /OS 11_0|OS 11_1|OS 11_2/.test(ua);

Mais attention car iOS 11.2 est encore largement utilisé (en avril 2018). Voir

stat 1

stat 2

Answer 3

Ce problème va au-delà de Bootstrap et de Safari. Il s'agit d'un bug d'affichage complet dans iOS 11 qui se produit dans tous les navigateurs. Le correctif ci-dessus ne résout pas ce problème dans tous les cas.

Le bogue est signalé en détail ici :

https://medium.com/@eirik.luka/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8

Il semblerait qu'ils aient déjà signalé ce problème à Apple en tant que bogue.

Answer 4

Bug frustrant, merci de l'avoir identifié. Sinon, je serais en train de me taper l'iphone ou la tête contre le mur.

La solution la plus simple est la suivante (1 ligne de code modifiée) :

Il suffit d'ajouter la feuille de style CSS suivante au fichier html ou à un fichier CSS externe.

<style type="text/css">
.modal-open { position: fixed; }
</style>

Voici un exemple complet de fonctionnement :

.modal-open { position: fixed; }

<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>

J'ai soumis un problème ici : https://github.com/twbs/bootstrap/issues/24059

Answer 5

Solution la plus simple et la plus propre :

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