Screen Zooms in When a Bootstrap Modal Is Opened on iOS 9 Safari

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

Site zooms out when menu is opened

This question actually boiled down to being the same as Does overflow:hidden applied to work on iPhone Safari?. I guess Mobile Safari will zoom out to make room for the menu and the content area when the user opens the menu, unless you do this on a wrapper element:

html,
body {
    overflow-x: hidden;
}

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

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>

Prevent iPhone from zooming in on `select` in web-app

It is probably because the browser is trying to zoom the area since the font size is less than the threshold, this generally happens in iphone.

Giving a metatag attribute "user-scalable=no" will restrict the user from zooming elsewhere. Since the problem is with select element only, try using the following in your css, this hack is originally used for jquery mobile.

HTML :

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

CSS:

select{
font-size: 50px;
}

src: unzoom after selecting in iphone

Modal popup functions properly but is invisible in safari. Built in React using the Creative Tim material ui dashboard

It looks like you are using the modal component inline in the component. That would nest it deep into the layout. While there's nothing wrong with that, Safari might be inheriting some style somewhere that's causing the modal to render invisible (overflow, visibility, etc). Instead of trying to trace down which parent element is causing the inheritance issue, you could try React portals.

A portal allows you to render a component in a different part of the root document. I like this approach generally for modal windows anyway because you can place the modal HTML outside of the layout containers. I tend to have better control over the modal window in the root of the document without having to mess with layout's margin, padding, flex, float, etc.

Take for instance this index.html code (trimmed down a bit for readability):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
            name="description"
            content="Web site created using create-react-app"
        />
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <title>React App</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="overlays"></div>
        <div id="root"></div>
    </body>
</html>

You will notice in there the <div id="overlays"></div>. You can use a portal to load a component in that div instead of the id="root" div.

In your Modal component code, you can render to a portal element:

import { createPortal } from 'react-dom';

const portalElement = document.getElementById('overlays');

const Modal = (props) => {
    return (
        <>
            {createPortal(
                    <div className="modal">
                        <div className="modal__content">{props.children}</div>
                    </div>,
                portalElement
            )}
        </>
    );
};

export default Modal;

That would take the layout out of the equation when rendering the Modal and hopefully fix the issue in Safari.

Let us know how this works for you!

How to make Bootstrap Modal dialog responsive on a real iPhone if it already works on an emulated iPhone on Google Chrome?

Seems like this is an iOS9 issue and it's unrelated to the content of the modal. I haven't got an iPhone 6+ but I experienced the same issue on my iPad.
Adding the following CSS made it work for me:

body {
  padding-right: 0px !important
}

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

https://stackoverflow.com/a/32720590/1581477

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

iOS 11 Safari bootstrap modal text area outside of cursor

I fixed the issue by adding position:fixed to the body when opening a modal.
Hope this will help you.

Screen Zooms in When a Bootstrap Modal Is Opened on iOS 9 Safari