On mobile/iOS views, is there a way to prevent my popup from being taller than my page?

StackOverflow https://stackoverflow.com/questions/22946706

Question

On my client’s site I’m using Magnific Popup to show the license agreement for their product when a “show agreement” link is clicked. So I’m using the inline type for a big long block of text. It works perfectly on the desktop. But it gets all messed up at the bottom on mobile.

If I understand correctly, at desktop views Magnific Popup sets <html> to overflow: hidden and the popup to position: fixed. At mobile views it doesn’t do this.

This would be fine, except for that my popup is so tall that it exceeds the height of my page. This means that it starts looking broken at the bottom.

screenshot of overflow problem on iOS - iPhone

I’d love to make it work on mobile/iOS as it does on desktop, but I’m starting to doubt that this is even possible. If anyone has any ideas I'd love to hear ‘em. Thanks!

Was it helpful?

Solution

You could add max-height: 100%, overflow-y: scroll on the popup. This way the biggest it can be is the size of the viewport, but users can scroll within it.

OTHER TIPS

for Magnific Popup - v1.1.0 - 2016-02-20 what worked for me was 

.mfp-bg,
body.mfp-zoom-out-cur {
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
}

mfp-bg is the background that can get larger than viewport and and allow scrolling

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top