2.1.2 - Product page gallery image not visible until swipe or zoom on IOS

[sam-g-roberts]

Magento ver. 2.1.2

On an IOS device go to a product page that contains an image in the fotorama gallery.

Expected result would be the image for the product in the fotorama gallery box.

Instead the box is blank white until you either click the box to zoom or swipe at which point the image appears.

I've tested this on IOS mobile (ios 10.1.1) and Tablet (9.3.5) on my local website which is a theme extending blank and also on this Luma demo theme.

http://magento2-demo.nexcess.net/

[sevos1984]

Thanks for reporting, internal ticket MAGETWO-60948

[Jrb1x]

Also having this problem, doesn't seem to matter what browser is being used on iOS (Safari, Chome, etc.).

Hello!
This problem is based on lib/web/mage/gallery/gallery.js file on 146 line :

if (this.isTouchEnabled) {
    this.settings.$element.on('tap', '.fotorama__stage__frame', function () {
        var translate = getTranslate($(this).parents('.fotorama__stage__shaft'));

        if (translate[1] === '0' && !$(this).hasClass('fotorama-video-container')) {
            self.openFullScreen();
            self.settings.$pageWrapper.hide();
        }
    });
}

You can fix this problem with additional checking config.allowfullscreen:

if (this.isTouchEnabled && config.allowfullscreen) {
    this.settings.$element.on('tap', '.fotorama__stage__frame', function () {
        var translate = getTranslate($(this).parents('.fotorama__stage__shaft'));

        if (translate[1] === '0' && !$(this).hasClass('fotorama-video-container')) {
            self.openFullScreen();
            self.settings.$pageWrapper.hide();
        }
    });
}

With best regards!

[Jrb1x]

@Hawok This doesn't seem to fix the issue, unfortunately. Added the code, cleared static content and redeployed, but with no luck.

[Tristan-N]

@Hawok Unfortunately it didn't fix my issue. It still exists. I checked on a vanilla 2.1.2 using Vagrant and the same issue is visible there. It happens in a Safari browser on a MacOS Sierra, but also on an iPhone 6 and a iPad (all Safari) I have the same issue.

Also notice the fact that the navigator below the image is activated on the actual first image, but the slider shows the second one.

It works great on Chrome (same Sierra) and on Android.

(note: the gif shows the loading part, then suddenly the image slides to the next and then stops)

[sam-g-roberts]

@Tristan-N i'd raise this

Also notice the fact that the navigator below the image is activated on the actual first image, but the slider shows the second one.

As a seperate issue. doubt it will be picked up here.

[Tristan-N]

@sam-g-roberts I'm not sure about that, because the images which is active in the navigator is the actual image that should be displayed in the slider above it. In this gif, nothing is clicked or so what causes the slider to move to the second image. The navigation stays with the right picture, but the slider automatically slides to the second one.

My point is that the navigation works properly and shows the right image activated, but the slider itself moves while it shouldn't.

[Anshu-Mishra]

I am also facing this same issue on Magento 2.1.2. Is there any expected date for the fix?