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):
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
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.
Commented
Feb 26, 2016 at 16:38
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
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;
}
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';
})
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'
);
}
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;
}
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);
});
}
}
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.