Magento2: 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.).

[ghost]

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?

[bve-9384]

In my case this behavior was caused by a problem with the product import, both the main image and the first additional image get the same media position (table catalog_product_entity_media_gallery_value). Somehow the slider tries to scroll to the first additional image, failing in a different manner on iOS.

The problem disappeared once I touched the image order in the product admin.

[ksz2013]

Hi,

Also another issue on ios, if we set the "allowfullscreen" option to false in the mage/gallery/gallery.
[ to disable the fullscreen ] -> this works properly on desktop and android devices, but on the ios we get only a blank page.

Can you recheck this issue as well?

Regards,
Szabi

[sam-g-roberts]

My original issue was resolved in a recent version. (Can't remember which one).

There are multiple issues raised here which are separate to the one i initially flagged. Please raise your issues as separate tickets or they will not be attended to.

@Tristan-N @ksz2013 @bve-9384

[tadhgbowe]

Hi Sam and anybody else who reads this.

In my version of CE 2.1.4 the original issue reported by Sam happened again. But not for all products. And it only seemed to happen for products with more than 2 media images. So I read all the other posts/comments here. And the problem for me was linked to the media image position (DB table catalog_product_entity_media_gallery_value). I found that some of the media images had the same position value! When I looked at that product in Chrome it appeared fine. But in Safari no joy. To fix it, I simply edited that product in the Admin Panel and repositioned the images by dragging and dropping them into the correct order. Then click Save. Make sure the base/main image is the first one listed. That stops the navigation effect on the product page itself.

So why did my position get out of sync. The Admin Panel Save fixes it as mentioned above. Well it's linked to how the products were imported. In our test import file the base/small/thumbnail image is the same image. Nothing wrong there. But when it comes to defining the addtional_images column we were only including the extra images (i.e. base image not listed here). If we include the base image here too listing it first, hey our import works perfectly and the position order in the DB is exactly as we defined it.

For example (before fix):
base_image = image1.jpg (thumbnail and small are also the same image).
additional_images = image2.jpg,image3.jpg

The corrected import fix:
base_image = image1.jpg (thumbnail and small are also the same image).
additional_images = image1.jpg,image2.jpg,image3.jpg

This was tested on Community 2.1.4 only.

Thanks for all the others who've commented. If they hadn't then I might not have found my issue. But as Sam has said if your issue is a little different to the original bug reported then it's best to report this separately.

All the best,
Tadhg

[malikt]

I was able to fix it, instead of editing each product and ordering the images.
create a new module for the fix or add the following in existing module (amend the paths accordingly)
you will need following lines in MTM/Galleryfix/etc/di.xml

<type name="Magento\Catalog\Block\Product\View\Gallery">
        <plugin name="mtm_gallery_position_fix" 
                type="MTM\Galleryfix\Plugin\Gallery" 
                sortOrder="1" 
                disabled="false"/>
    </type>

create a file Gallery.php and place it in MTM/Galleryfix/Plugin folder.

<?php

namespace MTM\Galleryfix\Plugin;

use Magento\Framework\Data\Collection;
use Magento\Framework\Json\EncoderInterface;
use Magento\Catalog\Helper\Image;
use Magento\Catalog\Block\Product\View\Gallery as GalleryBlock;
class Gallery
{

    public $galleryBlock;

    public function __construct(
        GalleryBlock $galleryBlock
    ) {
        $this->galleryBlock = $galleryBlock;
    }
    public function afterGetGalleryImagesJson(\Magento\Catalog\Block\Product\View\Gallery $subject, $result)
    {
        $imagesItems = []; $pos = 0; $isMain = true;
        foreach ($this->galleryBlock->getGalleryImages() as $image) {
            if($pos == 0){
                $isMain = true;
            }else{
                $isMain = false;
            }

            $imagesItems[] = [
                'thumb' => $image->getData('small_image_url'),
                'img' => $image->getData('medium_image_url'),
                'full' => $image->getData('large_image_url'),
                'caption' => $image->getLabel(),
                'position' => $pos++, //$image->getPosition(),
                'isMain' => $isMain,//$this->isMainImage($image),
            ];
        }
        if (empty($imagesItems)) {
            $imagesItems[] = [
                'thumb' => $this->_imageHelper->getDefaultPlaceholderUrl('thumbnail'),
                'img' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
                'full' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
                'caption' => '',
                'position' => '0',
                'isMain' => true,
            ];
        }
        return json_encode($imagesItems);
    }

}

clear the var folder and refresh the frontend, hopefully gallery will work fine.
Note: In my case first image in gallery was used as main image, you can amend the logic according to your requirement.

[igortregub]

We have the same issue in Magento 2.1.7.
@malikt, this fix isn't correct because this list generates twice and better way to fix it is using around plugin.

[erikhansen]

Magento support provided a patch containing the changes in this commit (4386f8db) to us. If you have this issue, I'd encourage you to apply that change to your Magento installation to see if it fixes your issue.

It looks like that change will be released in 2.2.0, but it's not in 2.1.9.