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

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

Magento 2.1.0 GA
PHP 7.0.6
Mysql 5.6
Use Luma theme

Steps to reproduce

Use the e.g. the Luma theme
Go into the frontend of magento and into a product.
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

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

Actual result

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.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 10
Comments: 32 (3 by maintainers)

Commits related to this issue

Merge pull request #5853 from magento-engcom/2.4-develop-graphql-prs [GraphQL] Partners Acceleration Program Contributions - 2.4-develop — committed to magento/magento2 by cpartica 4 years ago

Most upvoted comments

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.

+10

azanelli on Aug 20, 2016

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

azanelli on Sep 24, 2016

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!

andidhouse on Jul 28, 2016

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.

andidhouse on Feb 9, 2017

Closed as duplicate: #5302

MomotenkoNatalia on Sep 9, 2016

Not sure why this hasn’t been fixed yet…

ghost on Sep 6, 2016