Screen zooms in when a Bootstrap modal is opened on iOS 9 Safari

javascript css twitter-bootstrap-3 mobile-safari ios9
Sandeep Singh picture Sandeep Singh · Sep 20, 2015 · Viewed 17.3k times · Source

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

Answer

KingDome24 picture KingDome24 · Sep 22, 2015

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

Related questions

React Js conditionally applying class attributes

I want to conditionally show and hide this button group depending on what is passed in from the parent component which looks like this: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on …

Read More
Bootstrap modal: background jumps to top on toggle

I have a problem, with a modal. I have a button on a page, that toggles the modal. When the modal shows up, the page jumps to top. I have done everything I could to find a solution/etc, but …

Read More
Static Html Website - Bootstrap - Multi language Support

To begin with I want to state that I am newbie in Web Development. I was asked to build a static website (for a small - size hotel), and I bought this responsive html5 - CSS3 template. It consists of …

Read More