Magnific-popup: On mobile images cannot be loaded by the popup

[apasho]

Images will display in the popup with desktop browsers but not with mobile browsers.

[mpmurph]

I am not sure if you are having the same problem as I did - basically, everything worked great on desktop browsers but when I used a mobile device (I tried both Firefox and Safari on an iPhone 7 and Safari on an old iPad), every time I touched an image, it would navigate to the source url rather than display the image as a popup.

I tried debugging through Safari and the problem was not with the javascript failing to execute (callbacks were being called, etc.). I'm still not sure why the mobile devices were navigating away to the image source but the desktop wasn't - however, I found that things worked on both desktop and mobile when I switched my a element to a div, removed the href and used data-mfp-source instead as follows:

<div class="modal-image" data-mfp-src="/images/flowers/daisies.jpg"><img class="img-responsive" width="200px" height="200px" alt="daisies" /></div>

I tried using an a element with the page url as the href and with data-mfp-src defining the popout source but that just had the effect of reloading the page as a whole. Without the href at all in the a element things worked on both desktop and mobile too but it seemed wrong to have an a element without an href so I switched to using a div, although I am not sure that is recommended (on quick glance, I only saw the a element being used in the documentation).

All that said, I haven't tried this "fix" on many mobile devices yet so can't guarantee it's foolproof. However, thought to put it up here in case it helped diagnose what's happening.

[apasho]

I think the solution to the problem is to insure that the retina option is turned off.

[mpmurph]

Afraid that didn't work for me - I was using the retina plugin but I tried eliminating everything except the most basic initialization and still had the problem:

$('.modal-image').magnificPopup({ type: 'image'});

Maybe I have some other js plugin that is causing a conflict... Will post back if I figure out what!

[dadepl]

Adding options
fixedBgPos: true, fixedContentPos: true
to magnificPopup() worked for me on mobile devices to show content correctly.