Magento2: [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

5. Use the e.g. the Luma theme

6. Go into the frontend of magento and into a product.

7. 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

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

   Actual result

9. 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:
https://github.com/magento/magento2/issues/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.

[ghost]

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 (https://github.com/magento/magento2/issues/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 :
https://github.com/magento/magento2/commit/7597a52dbf7179106b4ebba928dc04efbe6a8c78

[dambrogia]

@abi2
it wont allow for swiping through images because that code block disabled all of the touch events with the e.stopPropagation(). It will allow you to utilize "arrowed" (prev & next buttons) navigation rather than swiping and removes the problem of not being able to navigate past the image slider when landing on the product page.

Thanks for the input o the .on() function, I wasn't aware that was valid syntax. I updated my code block to reflect your syntax comment.

[jmtakahashi]

After implementing code, INITIAL PAGE LOAD works correctly and page is scrollable, even when touching product image slider.

HOWEVER, on reload (refresh) on mobile, the page stops being scrollable again. Can someone shed some light on this?

[abi2]

My issue was fixed when I changed the size of the images.

[ghost]

@abi2 What do you mean. Changed the size within view.xml?

[abi2]

Yup, I downloaded the free theme from templatemonster and just used their view.xml and it works perfectly.

[andidhouse]

hi @abi2 can you pls post the xml here?
many thanks!

[abi2]

Here you go, just changed ext to txt,
view.xml.txt
I'm also attaching gallery.phtml in /Magento_Catalog/templates/product/view

gallery.phtml.txt

Let me know if this helps,

[jmtakahashi]

@abi2 @andidhouse how did changing your xml file fix things. Are you referring to the original issue of not being able to scroll up and down? If so, the JS fix that was mentioned previously, does work and my view.xml has already been modified to use the image sizes that I have uploaded in my site. Could you point out what lines were changed in gallery.phtml to fix the issue?

However through debugging, I've found, even with the fixed js, and these conditions a.) iphone 6 b.) private browsing mode the scroll will not function on multiple page reloads of a individual product page, after the first slider image. It's buggy and I can't seem to pinpoint why.

[abi2]

@jmtakahashi for me with smaller images it's working flawlessly,

[jmtakahashi]

@abi2 which issue? Did you fix the js no scroll problem by downloading a theme? Could the theme have the proper js (per github) already in it? Or did changing view.xml fix the scroll problem?

have you tested on an iphone in private browsing mode after a few page reloads on an individual product page?

View xml files are for proper image sizing, so I'm not sure how that would make the scroll function work properly, but I'd definitely like to know so I can fix my bug.

Thanks

[jmtakahashi]

@abi2 could you also clarify what "smaller images" means?

[abi2]

I didn't download the entire theme, just updated the 2 files and it's working great.
Yes we have tested on iPhone

[jmtakahashi]

@PaperDS If your just wondering where to put those downloaded files, and not about the JS issue, this question is probably better suited for Stackexchange:

But here you go, reply when you see this, so I can delete this comment, as it doesn't pertain to the issue at hand:

view.xml
Magento Install Dir -> app -> design -> frontend -> YourCustomThemeMaker -> YourCustomTheme -> etc -> view.xml

gallery.phtml
Magento Install Dir -> app -> design -> frontend -> YourCustomThemeMaker -> YourCustomTheme -> Magento_Catalog -> templates -> product -> view -> gallery.phtml

[PaperDS]

@jmtakahashi Ok thanks. Sorry about that.

[andidhouse]

we give it up on the native photorama implementation due to:

• problem with mobile devices and scrolling issue
• extreme long load times of the script compared to for example magic zoom
• some other small bugs and in general poor implementation of the script at this moment

Magic zoom works like a charm and has a great support fixing bugs in minute not years.

[jmtakahashi]

@paperds no problem!!!

[andidhouse]

i can confirm this is fixed n 2.1.3
thanks!

[andidhouse]

Extreme long load time remains...

[permabloom]

Just upgraded to 2.1.4 and still had this issue

[andidhouse]

2.1.4 - like any update so far on m2 - just solves a handful of reported issues here. You are lucky if your bug is solved. Most of the bugs remain and some new ones are introduced with every update. Can´t see m2 to be stabler within the next 2 years to be honest.

[keyurshah]

I stopped our m2 project. These types of bugs took so much time away from real development