Magento ver. 2.2.2 on an iOS device, go to a product page that contains an image in the fotorama gallery.

The expected result would be the image for the product in the fotorama gallery box. When I click on the close icon on an iPhone or iPad nothing happens. Hooked the device to my iMac to debug and there are no errors visible in the console.

I fixed this issue with below steps, let’s check it here.

Override gallery.js in your custom theme at app/design///web/fotorama/gallery.js. 

You can copy this file from /lib/web/mage/gallery/gallery.js and replace code as mentioned below.

From:

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();
    }
   });
}

To:

if (this.isTouchEnabled && this.settings.isFullscreen) {
            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();
                }
            });
        }

This problem is based on lib/web/mage/gallery/gallery.js file.