Magnific Popup not working on mobile

问题

Magnific popup seems to be working fine on desktop AND even Android phone but on an iPhone it shows the messsage "A problem occurred with this webpage so it was reloaded" and doesn't play the Vimeo video.

update: Just tried it on Chrome on my iPhone and it works fine. Looks like it's just Safari?

This is the HTML code:

<ul id="page1-slider7" class="bxslider">
    <li>
        <div class="c c1"><a href="http://vimeo.com/80951188" target="_blank" class="portfolio-link video">Watch Video</a><img src="images/sidecar/video/SmuinXXmas.jpg" /></div>
    </li>
    <li>
        <div class="c c2"><a href="http://vimeo.com/119386830" target="_blank" class="portfolio-link video">Watch Video</a><img src="images/sidecar/video/SunrunBrilliant.jpg" /></div>
    </li>
    <li>
        <div class="c c3"><a href="http://vimeo.com/151719496" target="_blank" class="portfolio-link video">Watch Video</a><img src="images/sidecar/video/PIER_BOGO_Video.jpg" /></div>
    </li>
</ul>

The js file

var initPopup = function(){
    $('.portfolio-link.video').magnificPopup({
        disableOn: 400,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: true
    });
}

Anyone have this issue? Thanks in advance!

回答1:

Remove this attributes "disableOn: 400"

Keep only below code.

jQuery('.portfolio-link.video').magnificPopup({
    type: 'iframe',
    mainClass: 'mfp-fade',
    removalDelay: 160,
    preloader: false,
    fixedContentPos: true
});

回答2:

I have faced same issue like you. I think issue is not in coding.

There are lots of reason for facing such type of issue.

Try to follow below Procedure. Trial 1)

1-Close all open apps by double pressing the Home button then swipe up on all open apps.

2-Clear your browser’s history and web site data by going to Settings > Safari > Clear History and Website Data.

3-Restart your device.

4-Reset your iPad or iPhone by  pressing and holding the Sleep/Wake and Home buttons at the same time for about 5-10 seconds until you see the Apple logo.

Trial 2)

Method 1: Resetting Network Setting.

Most of the time there is a network issue so we will start with Resetting network settings. So to do so, Just Navigate to Settings > General > Reset Network Settings.

Method 2: Clear Browser Cache & History.

If you figure out that Your network is not the issue, then your next step is to fix issues with your browser. So better you Clear your Browser Cache & History.

In Safari go to Settings > Safari > Clear Website Data. Now close the Browser and restart it to check whether the error still persists.

Tip: Close all the unused tabs in your browser.

Method 3: Resetting your iPAD

Most of the time 2 methods mentioned above should work to Fix A Problem Occurred with this Webpage so it was Reloaded error but if you still can't get rid of it, then You need to Reset your iPad.

Press and keep holding Home and Sleep Button for about 15 Seconds. Let it Reboot on its own. This should fix any further issues. if not then Try Method 4.

Method 4: Reinstalling JAVA

Finally, uninstall and then reinstall JAVA again. If Java is the issue then this Method will fix this error for you.

And 3 rd try)

Read the solution in Apple's Forums and try Solution as said by Users in Thread.

A problem occurred with this web page so it was reloaded

来源：https://stackoverflow.com/questions/34931390/magnific-popup-not-working-on-mobile

标签

javascript

ios

magnific-popup