Magento2: M2.1: Not scrollable picture on mobile / product page

[andidhouse]

Steps to reproduce

1. Install Magento 2.1 via download
2. install official sample data
3. Go to a product page

4. try to scroll down by hovering the picture

   Expected result

5. The site scrolls down also by touching the product picture

   Actual result

6. the product picture is not "scrollable" that means if you place your finger over the picture and try to scroll down nothing happens

This issue appeared on early magento2 versions and was fixed then. Now it is there again and it is important. I do not know if this issue just happens when no product picture is uploaded and placeholder is shown or if this happens also with a product picture uploaded.

Anyway - this needs to be fixes asap as this is a massiv blocker for users.

[andidhouse]

I think this is really an important bug stopping users to shop mobile at all so it needs to be reviewed here pls.

[andidhouse]

@ilol can you pls have a look on this. i think it is really important as it is a total conversion blocker for mobile users!

thanks!

[ilol]

Thank you @andidhouse , registered to fix MAGETWO-55608

[gazoscalvertos]

Please fix this, its a major issue on our site as the image spans 100% width.

[apurv-anand]

+1
Hit my this issue as well. Does anyone know any workaround for now?

[Simpsonight]

Here is a workaround for this bug which solves the problem.
Replace the hole onMove(e) function in file magento2/lib/web/fotorama/fotorama.js, at Line 1418, with the following code snippet:

function onMove(e) {
            if ((e.touches && e.touches.length > 1)
                || (MS_POINTER && !e.isPrimary)
                || moveEventType !== e.type
                || !touchEnabledFLAG) {
                touchEnabledFLAG && onEnd();
                (options.onTouchEnd || noop)();
                return;
            }

            extendEvent(e);

            var xDiff = Math.abs(e._x - startEvent._x), // opt _x → _pageX
                yDiff = Math.abs(e._y - startEvent._y),
                xyDiff = xDiff - yDiff,
                xWin = (tail.go || tail.x || xyDiff >= 0) && !tail.noSwipe,
                yWin = xyDiff < 0;


            if (touchFLAG && !tail.checked) {
              if (touchEnabledFLAG = xWin) {
                stopEvent(e);
              }
            } else {
                stopEvent(e);
                (options.onMove || noop).call(el, e, {touch: touchFLAG});
            }

            if (!moved && Math.sqrt(Math.pow(xDiff, 2) + Math.pow(yDiff, 2)) > tolerance) {
                moved = true;
            }

            tail.checked = tail.checked || xWin || yWin;
        }

[ghost]

Has this been fixed? This is a pretty big issue for mobile shoppers. The workaround does not seem to work on 2.1.1 rendering Magento pretty useless on a good number of mobile devices.

[ghost]

If you take a look at the default luma and blank theme this bug doesn't seem to have an impact on them. It rears its head on custom themes and is very present on several live sites I have looked at running CE.

[andidhouse]

3 month later without an official bugfix of a major bug... i really do not know what is going on on magento side...

[ghost]

It's pretty obvious, CE is not in the future.

[ghost]

@andimov @ilol any info on this bugfix?

[ilol]

Development completed. So we are merging this into mainline and older versions.

[ghost]

Thanks for responding, if your able to provide a date, when will we be able to utilize this, and how?

[SerhiyShkolyarenko]

Fix of MAGETWO-55608 is delivered to develop branch. Closing the issue.

[PaperDS]

I have test site with v2.1.1 and am having the same problem with Luma and sample data installed.
Scroll not working on mobile. http://test.starfishratings.net/

[ghost]

@PaperDS the fix is available in the developer branch, you could grab it from there and add it to your current install.

[keyurshah]

still seems to be an issue in the version released today, 2.1.2

[ghost]

Yes, I can confirm the fix isn't in 2.1.2. Not sure why....

[PaperDS]

So will this issue be reopened?

[lgarridoj]

@PaperDS Currently Magento 2.X.X has hundreds of issues. So far every release comes with fixes for 5-10 of those issues plus new ones of the specific release.
Some of the fixes are already available in the developer branch. That doesn't mean the fixes will be included in the next release. It might take Magento months (years?) to include those fixes in an "official" release.
You have 3 options:

• Stay with Magento 1
• Search for the fix of your issue in the developer branch
• Drop Magento and choose a software that just works as expected

[ghost]

Are there as many issues with EE?

[lgarridoj]

@jupiter01 I don't know really (i'm not a Magento employee). My previous comment is based on my experience so far using Magento 2 CE and the number of issues reported already in github by the community.

[sshymko]

Suffering from the same issue.

@piotrekkaminski @elenleonova @pboisvert
What release is the fix going to be included in? When is it coming out?

[erikhansen]

Applying the https://github.com/magento/magento2/commit/7597a52dbf7179106b4ebba928dc04efbe6a8c78 commit as a patch (add .patch to the end of that url to get a patch file) to my environment fixed the issue for me.

[yofisim]

After updating the following files, the patch is still not working.

[giusecapo]

Did anyone find a solution?

[yofisim]

Hi all, after some reviews, as I'm a very noobie to magento.
When I imported the files, the fix was not working for me too..
But after digging, I found that you have to recompile the files for the patch to work.
Which means you have to:

1) Replace the fotorama files as explained in the thread.
2 Run the following queries in M2 root folder in command line:
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento cache:flush
php bin/magento index:reindex

And this should work. At least it did for me!
Thumb up if it worked 👍 !

More info about M2 command line here: http://devdocs.magento.com/guides/v2.0/config-guide/cli/config-cli-subcommands.html

[giusecapo]

Sorry, I'm noobie (a lot) too, how to install the patch? @yofisim

[yofisim]

You will find the files to replace (and the exact lines that have been changed) here:
https://github.com/magento/magento2/commit/7597a52dbf7179106b4ebba928dc04efbe6a8c78

Replace them, then go for the few commands I gave you.

Good luck 💯

[giusecapo]

Unfortunately, I did everything exactly as you suggested me... But it still doesn't work :( @yofisim

[yofisim]

@giusecapo on your browser, when you're on the product page, check the fotorama.js file the browser process to see if you have inserted the correct files and did the right manipulation

[giusecapo]

You're right, page is loading fotorama.js from pub/static/... Do you know why? Should I clear static files again? @yofisim

[giusecapo]

Ok! It works! Thanks for your help, maybe I called deploy static content before ftp finished upload :) You made my day man @yofisim

[yofisim]

@giusecapo
Yes it's right, Magento needs this file to process the images and render them.
I want you to check the file itself, and see if the change you made is taken by the browser.

Report again to these files here: https://github.com/magento/magento2/commit/7597a52dbf7179106b4ebba928dc04efbe6a8c78

and check the changes @

[yofisim]

Ow nice! thumb up! Have a nice dev day @giusecapo

[jmtakahashi]

@ilol @yofisim note that this fix works on initial page load, but on reload (refresh) it does not work. on reload, first image in the slider will react to up and down scrolling, but on 2nd image or 3rd image (any image after first), the scrolling issue persists.

[yofisim]

@jmtakahashi please provide more infos as I tried to reproduce your issue
and didn't succeed. Patch is working fine from my side.

On Mon, 5 Dec 2016 at 7:39 jmtakahashi [e-mail] wrote:

@ilol https://github.com/ilol @yofisim https://github.com/yofisim
note that this fix works on initial page load, but on reload (refresh) it
does not work. on reload, first image in the slider will react to up and
down scrolling, but on 2nd image or 3rd image (any image after first), the
scrolling issue persists.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/magento/magento2/issues/5302#issuecomment-264772086,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE-POZXpSxYGfvdvJsLnRtLayWYyU643ks5rE6OPgaJpZM4I_zKV
.

[jmtakahashi]

@yofisim

Device:
a.) iphone 6s
b.) private browsing mode

Magento 2.1.2 (i'm including these because the JS merge, minify and bundle are problems in themselves when set to on)
a.) Minify, Bundle, Merge JS: ALL OFF
b.) Merge and Minify CSS: ON
c.) Minify Html: OFF

1.) Click to an individual product page from any page.
2.) Check slider (all images), and check scrolling. It will work.
3.) Reload the individual product page a few times.
4.) Check slider (default first image), scrolling will work with first image.
5.) Slide to 2nd or 3rd image, scrolling up and down while finger is over the image stops working.

Hope this helps. I'm not sure whether the Private Browsing mode has anything to do with it, but reloading the page (today) once, and it still worked. Then the 2nd time reloading it stopped working again.

[yofisim]

@jmtakahashi dis you emulate on your browser in Desktop? Can you please
check the console to retrieve the error that is triggered when the
scrolling doesn't work.

It's a very weird issue and I believe it comes from elsewhere in the code.
Maybe you can provide URL?

On Tue, 6 Dec 2016 at 8:10 jmtakahashi [e-mail] wrote:

@yofisim https://github.com/yofisim

Device:
a.) iphone 6s
b.) private browsing mode

Magento 2.1.2 (i'm including these because the JS merge, minify and bundle
are problems in themselves when set to on)
a.) Minify, Bundle, Merge JS: ALL OFF
b.) Merge and Minify CSS: ON
c.) Minify Html: OFF

1.) Click to an individual product page from any page.
2.) Check slider (all images), and check scrolling. It will work.
3.) Reload the individual product page a few times.
4.) Check slider (default first image), scrolling will work with first
image.
5.) Slide to 2nd or 3rd image, scrolling up and down while finger is over
the image stops working.

Hope this helps. I'm not sure whether the Private Browsing mode has
anything to do with it, but reloading the page (today) once, and it still
worked. Then the 2nd time reloading it stopped working again.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/magento/magento2/issues/5302#issuecomment-265069344,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE-POSpA0eheNnrBd-ZKZKGirHoL-Lyrks5rFPw7gaJpZM4I_zKV
.

[jmtakahashi]

@yofisim this was tested on an actual phone. https://vizume.com

Any product image does the same thing.

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

[elenleonova]

The issue has been delivered to 2.1.3

[andidhouse]

i can confirm this is fixed n 2.1.3
thanks!

[erik-augustin]

Its not fixed on Chrome on ios iphone. Its fixed in Safari.

[through-a-haze]

@erik-augustin just rechecked. It's fixed on both for me.