dimsemenov / Magnific-Popup

Light and responsive lightbox script with focus on performance.
http://dimsemenov.com/plugins/magnific-popup/
MIT License
11.38k stars 3.49k forks source link

Popup background div doesn't fit 100% of some mobile browser windows #1061

Open MeltdownInteractive opened 6 years ago

MeltdownInteractive commented 6 years ago

I've had some issues on both Safari and Chrome on mobile devices.

The background div doesn't extend to 100% of the viewport.

I changed the CSS for the mfp-bg class. I set the width and height to 10000vw/vh. This makes sure the popup always fills the screen on mobile browsers, and I had some issues on iPhone 5S with Safari too.
I also set margin:0

Setting the width/height to 100vw/vh or to the view width/height still doesn't work on all mobile browsers. After around 2 days of work testing across 5 devices this is what worked for me.

Hope it helps.

`

.mfp-bg {
top: 0;
left: 0;
margin: 0;
width: 100%;
height: 100%;
height: 10000vh;
width: 10000vw;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8;
}

`