35

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:

safari screenshot

Chrome screenshot(expected behavior):

chrome screenshot

7 Answers 7

29

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

3
  • 1
    this worked for me, I previously had the code like below where it updated the meta content, but this did not work in my case. I combined the two css statements above into a single css body.modal-open.
    – Ron
    Commented Jan 23, 2016 at 23:20
  • 3
    FWIW: setting body {padding-right: 0px !important;}, the body on every page/view in your Web site/app regardless if a modal is visible or not will be padding-right: 0px;. This could have an adverse effect in areas of your app. If you move the padding-right into .model-open {} you'll have the same outcome but will ensure that the body is only effected in this way when a modal is open. This works because the .modal-open class is attached to the body tag, not some nested tag within the body. Also, go for specificity by setting the rule as body.modal-open {...} if you wanted.
    – WizzyBoom
    Commented Feb 26, 2016 at 16:38
  • To add to this, an issue I was noticing on a site we manage is that some contents were (purposefully) forced outside view, and so setting the body's width to 100% fixed it, as it then fit to the html width by inheriting the window width.
    – JSess
    Commented Aug 19, 2016 at 20:45
9

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;
}
2
  • 1
    This bug has been fixed by WebKit Bug 152803 Commented Jan 8, 2016 at 0:20
  • I tried like 10 solutions before I tried this - nothing worked but this did :) I just have to verify that this doesn't have any weird effects. Commented Apr 11, 2016 at 14:08
7

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

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

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;
}
1

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);
    });
  }
}
2
  • missing one bracket. should be : if(/iPad|iPhone|iPod/.test(navigator.userAgent.toLowerCase()))
    – iVenGO
    Commented Mar 9, 2016 at 10:32
  • Thanks . Worked for me, but only after i changed the iPad|iPhone to lower case as well if (/ipad|iphone|ipod/.test(navigator.userAgent.toLowerCase())) Commented Apr 18, 2017 at 12:32
0

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.

2
  • Hi DotNetHacker, what you think of my solution. Would you recommend it? Commented Sep 21, 2015 at 6:27
  • I think your solution would be better if the selector was on the class .modal rather than by the id, then the fix will work for any modal you have on your webpage/site. Commented Sep 21, 2015 at 21:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.