Open NSDrowned opened 10 years ago
i think its the same issue as mine, i posted 13 days before: https://github.com/dimsemenov/Magnific-Popup/issues/550
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.
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.
@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
/* ============== 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
});
Thank you @carasmo
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?