Screen zooms in when a Bootstrap modal is opened o

问题:

When I open a Bootstrap 3 modal on iOS9 Safari, the screen zooms in. It is working as expected on the Chrome app on iPhone. Below are the pictures which show the issue.

Safari screenshot:

Chrome screenshot(expected behavior):

回答1:

The following code fixed the issue for me (and some other people -> see GitHub link):

body {
  padding-right: 0px !important
}

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

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

回答2:

According to Bootstrap's Wall of Browser Bugs, this is a known issue in iOS 9 Safari.

Safari (iOS 9+)
Sometimes excessive automatic zoom is applied after opening a modal, and > the user isn’t allowed to zoom out

WebKit bug #150715

The title of the WebKit bug is:

Excessive enforced zoom when body is short and overflow:hidden (new iOS 9 breakage)

Based on the part of the title when body is short, I tried setting the body's minimum height to the viewport height, which worked for my site though may not be a general solution:

body {
    min-height: 100vh;
}

回答3:

I have no idea why this is happening. Modal examples on the bootstrap website are working fine.

Anyhow, here is what I did.

I changed the viewport meta tag, to forces safari to not zoom. I also did not want to take away zoom from user, so I changed it back when user dismiss the modal.

To force stop the 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';
})    

To change it back to default:

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

回答4:

It appears to be a viewport bug.

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

Code that worked for me from that thread:

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

回答5:

As noted in the comments of the accepted answer, it is best to apply the fix to only the .modal-open class.

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

回答6:

Based on Sandeep Singh's Answer, but adjusted to listen for all modal open/close, and to store the original content.

I'm using webpack, but only jQuery($) with the fixBootstrapModalZoomBug method below are needed.

// 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);
    });
  }
}

回答7:

I've also been hit by this problem and have tracked down what I believe to be the problem.

The issue (at least for me) seems to be when the content on the page doesn't vertically fill the page, causing iOS 9 Safari to zoom in when the modal is displayed. This would explain why the Bootstrap example works as expected - the page has a lot of content (vertically).

I'm guessing that it needs some CSS magic (a height: 100% somewhere?). If anyone is a whizz with CSS especially Bootstrap then any help would be appreciated, in the meantime I'll carry on trying to find a fix & post back here with an update.

Update: I have implemented a CSS Sticky Footer and this has addressed the problem - not exactly the fix I wanted but it is working nonetheless. For reference I used the sticky footer implementation by Ryan Fait (http://ryanfait.com/sticky-footer/) but I guess any sticky footer would work.