webentwicklung-frage-antwort-db.com.de

Der Bildschirm wird vergrößert, wenn unter iOS 9 Safari ein Bootstrap modal geöffnet wird

Wenn ich ein Bootstrap 3 modal auf iOS9 Safari öffne, wird der Bildschirm vergrößert. Es funktioniert wie erwartet auf der Chrome App auf dem iPhone. Unten sind die Bilder die zeigen das Problem.

Safari-Screenshot:

safari screenshot

Chrome-Screenshot (erwartetes Verhalten):

chrome screenshot

35
Sandeep Singh

Der folgende Code hat das Problem für mich (und einige andere Leute -> siehe GitHub-Link) behoben:

body {
  padding-right: 0px !important
}

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

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

29
KingDome24

Laut Bootstraps Wall of Browser Bugs ist dies ein bekanntes Problem in iOS 9 Safari.

Safari (iOS 9+)
Manchmal wird nach dem Öffnen eines Modals ein übermäßiger automatischer Zoom angewendet, und> der Benutzer kann nicht herauszoomen

WebKit-Fehler # 150715

Der Titel des WebKit-Fehlers lautet:

Übermäßiger erzwungener Zoom bei kurzem Körper und Überlauf: versteckt (neuer iOS 9-Bruch)

Basierend auf dem Teil des Titels , in dem der Körper kurz ist , habe ich versucht, die Mindesthöhe des Körpers auf die Höhe des Ansichtsfensters festzulegen, was auf meiner Website möglicherweise nicht funktioniert sei eine allgemeine Lösung:

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

Ich habe keine Ahnung, warum das passiert. Modale Beispiele auf der bootstrap Website funktionieren einwandfrei.

Wie auch immer, hier ist was ich getan habe.

Ich habe das Meta-Tag des Ansichtsfensters geändert, um zu verhindern, dass die Safari zoomt. Ich wollte den Zoom auch nicht vom Benutzer entfernen, also habe ich ihn zurückgesetzt, wenn der Benutzer das Modal schließt.

So halten Sie den Zoom an:

$('#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';
})    

So stellen Sie die Standardeinstellung wieder her:

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

Es scheint sich um einen Fehler im Ansichtsfenster zu handeln.

Diskussion hier: https://www.reddit.com/r/web_design/comments/3la04p/psa_safari_on_ios9_has_a_media_query_bug/

Code, der in diesem Thread für mich funktioniert hat:

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

Wie in den Kommentaren der akzeptierten Antwort angegeben, ist es am besten, den Fix nur auf die .modal-open-Klasse anzuwenden.

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

Basierend auf Sandeep Singhs Antwort , aber angepasst, um alle modalen Öffnungs-/Schließvorgänge abzuhören und den ursprünglichen Inhalt zu speichern.

Ich verwende Webpack, aber nur jQuery ($) mit der fixBootstrapModalZoomBug Methode werden benötigt.

// 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

Ich bin auch von diesem Problem betroffen und habe herausgefunden, was meines Erachtens das Problem ist.

Das Problem scheint (zumindest für mich) zu sein, wenn der Inhalt der Seite die Seite nicht vertikal ausfüllt und iOS 9 Safari die Ansicht vergrößert, wenn das Modal angezeigt wird. Dies würde erklären, warum das Beispiel Bootstrap erwartungsgemäß funktioniert - die Seite enthält viel Inhalt (vertikal).

Ich vermute, dass es etwas CSS-Magie braucht (eine Höhe: 100% irgendwo?). Wenn jemand ein Fan von CSS ist, insbesondere Bootstrap), dann wäre jede Hilfe willkommen. In der Zwischenzeit werde ich weiterhin versuchen, einen Fix zu finden und mit einem Update hierher zurückzukehren.

Update: Ich habe einen CSS Sticky Footer implementiert und dies hat das Problem behoben - nicht genau das, was ich wollte, aber es funktioniert trotzdem. Als Referenz habe ich die Sticky-Footer-Implementierung von Ryan Fait ( http://ryanfait.com/sticky-footer/ ) verwendet, aber ich denke, jeder Sticky-Footer würde funktionieren.

0
Alan Savage