Bootstrap Modal Issue on Safari/Ios/Iphone

Bootstrap modal issue on Safari/iOS/iPhone

I had the same problem these days and figured out, that safari on iOS is working differently to other browsers with respect to one thing. The modal window is not shown on safari but on many other browsers, when there is a href="#" missing.

not working on Safari/iOS but other browsers:

<li><a data-toggle="modal" data-target="#testModal">Modal</a></li>

working on Safari/iOS and other browsers:

<li><a href="#" data-toggle="modal" data-target="#testModal">Modal</a></li>

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

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

Bootstrap modal pop up issue on Iphone

We fixed the issue by using position:absolute instead of position:fixed

Position fixed and absolute are somewhat similar in behavior. Both use x,y positioning in the view port and both are outside of the DOM document flow so other content is not affected by the placement of containers. Both require zIndex positioning to determine vertical priority in the view stack.

Position fixed keeps the element pinned at whatever position you set it to regardless of the scroll position of the browser. This makes sense in some scenarios where you actually want to scroll the entire page but leave content in place. The key to remember is to not use it when you build have your own scrollable content on the page.

It turns out in my case I don’t really need position:fixed because I manage the position and size of the container and toolbar headers and footers myself anyway. I know where everything is positioned and keep the content area effectively wedged in the middle of the statically sized elements. By way of CSS and media queries I can force the header to the top and the footer on the bottom using fixed sizes which means I can safely use position:absolute.

Unable to scroll Bootstrap modal in iphone safari if the screen is pinch zoomed

Make the page not zoomable and this will fix it:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Also try:

body.modal-open {overflow: hidden;}

---

Related Topics