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 height changes after load on iOS 8 / Safari #558

Open NSDrowned opened 10 years ago

NSDrowned commented 10 years ago

The popup works fine on all browsers except on my iphone/ipad with iOS 8. When I click the height of the popup is fine, but when the content loads, the height of the popup gets adjusted to match all the content, making the height of the popup taller than the screen which disables the scrollbar (since there is no need for it) causing the background to scroll when I touch scroll the popup. I've been going over the code trying to figure out which part is making this height adjustment without any success.

Any ideas?

Cranke commented 10 years ago

i think its the same issue as mine, i posted 13 days before: https://github.com/dimsemenov/Magnific-Popup/issues/550

thinsoldier commented 9 years ago

It's apple's fault. http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/

Non standard iframe behaviour that's been around since iOS 4 or 5.

The popup is loading your content in an iframe.

There are workarounds you can add to the file that is being loaded into the iframe. https://github.com/fancyapps/fancyBox/issues/2#issuecomment-5997068 I've found I only need to add the stuff to the html and body tag of the file being loaded into the iframe. I haven't had to mess with the iframe generated by magnific.

tl;dr : apple made a dumb decision years ago and now it's too late for them to fix it. You're going to have to research workarounds.

carasmo commented 9 years ago

I decided in the last year or two to just show iframes on non-touch devices since the native apps for google maps, youtube, vimeo, etc, are much easier to deal with. If you want the code I use let me know.

influxweb commented 9 years ago

@carasmo I would love to see the code you used. I have not had to deal with this issue yet, but I would be nice to be armed with a solution should the need arise

carasmo commented 9 years ago
/* ============== SUPPORTS TOUCH OR NOT ========= */
/*! Detects touch support and adds appropriate classes to html and returns a JS object  |  Copyright (c) 2013 Izilla Partners Pty Ltd  | http://www.izilla.com.au / Licensed under the MIT license  |  https://coderwall.com/p/egbgdw */
var supports=(function(){var d=document.documentElement,c="ontouchstart" in window||navigator.msMaxTouchPoints;if(c){d.className+=" touch";return{touch:true}}else{d.className+=" no-touch";return{touch:false}}})();
$(document).ready(function() {
    // ============  magnificPopup :: iframe content with specific url types for only youtube, vimeo, and google maps others can be added by you  ======================== //
    /* ++++ vimeo, youtube, and google maps disabled on touch devices as native behavior is preferred ++++ */
    if ($('html').hasClass('no-touch')) {
        $('.pop-youtube, .pop-vimeo, .pop-gmaps').magnificPopup({
            type: 'iframe',
            iframe: {
                markup: '<div class="mfp-iframe-scaler">' +
                    '<div class="mfp-close"></div>' +
                    '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>' +
                    '<div class="mfp-title">Some caption</div>' +
                    '</div>'
            },
            callbacks: {
                markupParse: function(template, values, item) {
                    values.title = item.el.attr('title');
                }
            }
        });
    } // end if no-touch
 });
influxweb commented 9 years ago

Thank you @carasmo