[2.1.0] Fotorama gallery touch devices - scrolling up/down does not work

[peec]

When in mobile view and you try to scroll down, and is on a product page you normally put the finger on the large image of the product and swipe down/up to scroll on mobile devices. This does not work. When trying to drag from the fotorama gallery, nothing happens / it does not scroll. Since the image takes roughly 60% of the screen on mobile devices, this issue is very critical.

See the screenshot of explanation.

Preconditions

1. Magento 2.1.0 GA
2. PHP 7.0.6
3. Mysql 5.6
4. Use Luma theme

Steps to reproduce

1. Use the e.g. the Luma theme
2. Go into the frontend of magento and into a product.
3. On the touch screen try to put the finger on the product image and drag down / up. You notice that it never scrolls.

Expected result

1. Should scroll down/up even if dragging from the image.

Actual result

1. Does not scroll

Illustration of how to reproduce the bug:

Some times you get this error also ( might be related ):

Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.
fotorama.js:1372 Uncaught TypeError: Cannot read property 'clientY' of undefinedextendEvent @ fotorama.js:1372onMove @ fotorama.js:1428
fotorama.js:1216 Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

[andidhouse]

hi @peec

i think this is a duplicate of:
#5302

I also totally agree with you that this is a very very important bug as mobile users will get stuck!

Really important to fix this not in month but days i think!

[peec]

Hi,

Ah I did not find this bug when searching for fotorama. I guess we don't need two reports for this.

[azanelli]

We have this issue also. Very annoying!

As workaround we disabled the touchmove event from gallery's images, with this javascript:

$(".fotorama__img").on("touchmove", function(e) {
    e.stopPropagation(); 
});

It must be executed after fotorama loads gallery images, so we used something like this:

function disableGalleryTouchmove() {
  $(".fotorama").one("fotorama:load", function () {
    $(".fotorama__img").on("touchmove", function(e) {
      e.stopPropagation(); 
    });
  });
}

if ($(".fotorama").length !== 0) {
  disableGalleryTouchmove();
}
else {
  $('.gallery-placeholder').on('gallery:loaded', function() {
    disableGalleryTouchmove()
  });
}

Hoping this bug will solved soon.

Not sure why this hasn't been fixed yet...

[MomotenkoNatalia]

Closed as duplicate: #5302

[jessp855]

@azanelli

What file or where the exactly location im going to modify in order to disable "touchmove"event from gallery's images.

Thanks

[azanelli]

@jessp855 We placed it inside our javascript file within our custom theme.

So it is something like this:

app/design/frontend/Company/ThemeName/web/js/main.js

define([
  "jquery",
  //
  "domReady!"
], 
function($) {

  // Here the code

}); // define

But you can place it in any javascript file you want that is loaded in the product page (only be sure to require jquery).

Note also that this bug has already been fixed (#5302) and perhaps will be solved with some next release ;).

[dambrogia]

Extending on what both @jessp855 and @azanelli said, I was having problems with more touch events more so than just the touchmove event. After I implement their fix, in my instance there was still buggy behavior. To fix this I also used the touchstart, touchend and click events. I used the click event conditionally based on the navigator.userAgent because I wanted to target Android and iOS devices.

    require(["jquery"], function($) {
    function disableGalleryTouchmove() {
        $(".fotorama").one("fotorama:load", function () {
            $(".fotorama__img").on("touchmove touchstart touchend", function(e) {
                e.stopPropagation();
            });
            $(".fotorama__img, .fotorama__stage__frame").on("click", function(e) {
                // Check for mobile devices before interupting click event.
                var isiOS = /ipad|iphone|ipod/.test(navigator.userAgent.toLowerCase()) && !window.MSStream;
                var isAndroid = /android/.test(navigator.userAgent.toLowerCase()) && !window.MSStream;
                if (isAndroid || isiOS) {
                    // disabled click event
                    e.stopPropagation();
                    return false;
                }
            });

        });
    }
    if ($(".fotorama").length !== 0) {
        disableGalleryTouchmove();
    } else {
        $('.gallery-placeholder').on('gallery:loaded', function() {
            disableGalleryTouchmove();
        });
    }
});

[pareshe]

This not work.

This work in first image, if you slide to second image(in multiple product image) then in second and onward image this not work.

[abi2]

@domdambrogia didn't have success with your code,
BTW why not do
$(".fotorama__img").on("touchmove touchstart touchend ", function(e) {
e.stopPropagation();
});

Thanks

[pareshe]

Now working with below commit change :
7597a52