web-dev-qa-db-fra.com

L'écran fait un zoom avant lorsqu'un modal Bootstrap est ouvert sur iOS 9 Safari

Lorsque j'ouvre un modal Bootstrap 3 sur iOS9 Safari, l'écran zoome. Il fonctionne comme prévu sur l'application Chrome sur iPhone. Ci-dessous les images) qui montrent le problème.

Capture d'écran de Safari:

safari screenshot

Capture d'écran de Chrome (comportement attendu):

chrome screenshot

javascriptcsstwitter-bootstrap-3mobile-safariios9
35
Sandeep Singh

Le code suivant a résolu le problème pour moi (et pour certaines autres personnes -> voir le lien GitHub):

body {
  padding-right: 0px !important
}

.modal-open {
  overflow-y: auto;
}

Source: https://github.com/jschr/bootstrap-modal/issues/64#issuecomment-55794181

29
KingDome24

Selon Bootstrap Wall of Browser Bugs , il s'agit d'un problème connu dans iOS 9 Safari.

Safari (iOS 9+)
Parfois, un zoom automatique excessif est appliqué après l'ouverture d'un modal, et> l'utilisateur n'est pas autorisé à effectuer un zoom arrière

bogue WebKit # 150715

Le titre du bogue WebKit est:

Zoom forcé excessif lorsque le corps est court et débordé: caché (nouvelle rupture iOS 9)

Sur la base de la partie du titre lorsque le corps est court , j'ai essayé de définir la hauteur minimale du corps sur la hauteur de la fenêtre d'affichage, ce qui a fonctionné pour mon site mais peut ne pas être une solution générale:

body {
    min-height: 100vh;
}
9
Doug Richardson

Je ne sais pas pourquoi cela se produit. Les exemples modaux sur le site Web bootstrap fonctionnent bien.

Quoi qu'il en soit, voici ce que j'ai fait.

J'ai changé la balise META de la fenêtre pour forcer Safari à ne pas zoomer. Je ne voulais pas non plus retirer le zoom à l'utilisateur, alors je l'ai changé lorsque l'utilisateur a supprimé le modal.

Pour forcer l'arrêt du zoom:

$('#myModal').on('show.bs.modal', function (e) {
document.querySelector('meta[name="viewport"]').content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
})

Pour rétablir la valeur par défaut:

$('#myModal').on('hidden.bs.modal', function (e) {
document.querySelector('meta[name="viewport"]').content = 'viewport" content="width=device-width, initial-scale=1';
})
7
Sandeep Singh

Il semble que ce soit un bug de la fenêtre d'affichage.

Discussion ici: https://www.reddit.com/r/web_design/comments/3la04p/psa_safari_on_ios9_has_a_media_query_bug/

Code qui a fonctionné pour moi à partir de ce fil:

if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
    document.querySelector('meta[name=viewport]')
      .setAttribute(
        'content',
        'initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no'
      );
  }
6
LOLapalooza

Comme indiqué dans les commentaires de la réponse acceptée, il est préférable d'appliquer le correctif uniquement à la classe .modal-open.

body.modal-open{
  padding-right: 0 !important;
  overflow-y: auto;
}
3
Justin

Basé sur Réponse de Sandeep Singh , mais ajusté pour écouter tous les modes d'ouverture/fermeture modaux et pour stocker le contenu original.

J'utilise webpack, mais seulement jQuery ($) avec la méthode fixBootstrapModalZoomBug ci-dessous sont nécessaires.

// fix-quirks.js - referenced from my main application's file
var $ = require('jquery');
$(fixQuirks);

function fixQuirks() {
  fixBootstrapModalZoomBug();   
}

function fixBootstrapModalZoomBug() {
  // Fix Bootstrap Modal zoom bug
  //    https://stackoverflow.com/questions/32675849/screen-zooms-in-when-a-bootstrap-modal-is-opened-on-ios-9-safari
  if(/iPad|iPhone|iPod/.test(navigator.userAgent.toLowerCase())) {
    var m = $('meta[name=viewport]');
    var originalContent = m.attr('content');

    $('body').delegate('*','show.bs.modal',function(ev){
      m.attr('content', 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0');
    }).delegate('*','hidden.bs.modal',function(ev){
      m.attr('content', originalContent);
    });
  }
}
1
Tracker1

J'ai également été touché par ce problème et j'ai trouvé ce que je pense être le problème.

Le problème (du moins pour moi) semble se produire lorsque le contenu de la page ne remplit pas la page verticalement, ce qui entraîne un zoom avant d'iOS 9 Safari lorsque le modal est affiché. Cela expliquerait pourquoi l'exemple Bootstrap fonctionne comme prévu - la page a beaucoup de contenu (verticalement).

Je suppose qu'il a besoin de magie CSS (une hauteur: 100% quelque part?). Si quelqu'un est un expert en CSS, en particulier Bootstrap alors toute aide serait appréciée, en attendant, je continuerai d'essayer de trouver un correctif et de revenir ici avec une mise à jour.

Mise à jour: J'ai implémenté un pied de page CSS collant et cela a résolu le problème - pas exactement le correctif que je voulais, mais cela fonctionne néanmoins. Pour référence, j'ai utilisé l'implémentation du pied de page collant par Ryan Fait ( http://ryanfait.com/sticky-footer/ ) mais je suppose que n'importe quel pied de page collant fonctionnerait.

0
Alan Savage