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

andidhouse · 2016-06-28T07:00:29Z

Steps to reproduce

Install Magento 2.1 via download
install official sample data
Go to a product page
try to scroll down by hovering the picture

Expected result

The site scrolls down also by touching the product picture

Actual result

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 · 2016-06-30T13:16:03Z

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

andidhouse · 2016-07-19T12:43:46Z

@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 · 2016-07-19T13:34:40Z

Thank you @andidhouse , registered to fix MAGETWO-55608

gazoscalvertos · 2016-08-07T23:06:08Z

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

apurv-anand · 2016-08-09T12:27:33Z

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

Simpsonight · 2016-08-09T16:09:02Z

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 · 2016-09-06T15:00:56Z

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 · 2016-09-07T15:47:47Z

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 · 2016-09-14T11:29:07Z

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

ghost · 2016-09-14T11:53:21Z

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

ghost · 2016-09-14T22:17:48Z

@andimov @ilol any info on this bugfix?

ilol · 2016-09-15T10:00:14Z

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

ghost · 2016-09-15T15:03:20Z

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

…uct page #5302

Bug MAGETWO-56699 [GITHUB] Paypal checkout not possible with products that have custom options #5938 - for mainline MAGETWO-58290 [Github]Empty product option is added on each PUT request #5963 MAGETWO-58136 [Github] Shipping and billing address are not set if order placed with payment action Sale #6438 MAGETWO-55608 [GITHUB] M2.1: Not scrollable picture on mobile / product page #5302 MAGETWO-58285 Ajax error message doesn't display in backend MAGETWO-58338 [Github]Problem adding attribute options that start with a number via REST Api #5715 MAGETWO-52575 Unable to apply free shipping to specified method when creating order in admin MAGETWO-57078 [GITHUB] Can't set customer group when creating a new order in the admin. #6162 MAGETWO-58039 Table rate shipping not applying correctly - for mainline

SerhiyShkolyarenko · 2016-09-20T12:52:22Z

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

PaperDS · 2016-10-10T17:06:30Z

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 · 2016-10-10T19:50:39Z

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

keyurshah · 2016-10-12T20:34:48Z

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

ghost · 2016-10-13T01:29:34Z

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

PaperDS · 2016-10-13T11:18:48Z

So will this issue be reopened?

jibrandlr · 2016-10-13T15:26:25Z

@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 · 2016-10-13T16:34:37Z

Are there as many issues with EE?

jibrandlr · 2016-10-13T17:38:09Z

@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 · 2016-11-16T16:31:43Z

Suffering from the same issue.

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

erikhansen · 2016-11-17T22:01:46Z

Applying the 7597a52 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 · 2016-11-23T10:29:00Z

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

giusecapo · 2016-11-24T12:24:07Z

Did anyone find a solution?

yofisim · 2016-11-24T12:29:35Z

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:

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 · 2016-11-24T12:38:38Z

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

yofisim · 2016-11-24T12:42:41Z

You will find the files to replace (and the exact lines that have been changed) here:
7597a52

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

Good luck 💯

giusecapo · 2016-11-24T13:29:34Z

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

yofisim · 2016-11-24T13:31:26Z

@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 · 2016-11-24T13:34:18Z

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

giusecapo · 2016-11-24T13:38:44Z

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

yofisim · 2016-11-24T13:39:00Z

@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: 7597a52

and check the changes @

yofisim · 2016-11-24T13:39:21Z

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

jmtakahashi · 2016-12-05T05:39:14Z

@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 · 2016-12-05T18:42:09Z

@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 ***@***.***> 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 <#5302 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AE-POZXpSxYGfvdvJsLnRtLayWYyU643ks5rE6OPgaJpZM4I_zKV> .

jmtakahashi · 2016-12-06T06:09:51Z

@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 · 2016-12-06T06:16:10Z

@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 ***@***.***> 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 <#5302 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AE-POSpA0eheNnrBd-ZKZKGirHoL-Lyrks5rFPw7gaJpZM4I_zKV> .

jmtakahashi · 2016-12-06T06:32:47Z

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

Any product image does the same thing.

andidhouse · 2016-12-08T16:59:00Z

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.

…uct page #5302

elenleonova · 2016-12-15T02:02:42Z

The issue has been delivered to 2.1.3

andidhouse · 2016-12-15T12:14:25Z

i can confirm this is fixed n 2.1.3
thanks!

erik-augustin · 2016-12-18T21:34:07Z

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

through-a-haze · 2017-01-26T13:11:43Z

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

[TSG-CSL3] For 2.4 (pr3)

veloraven added Issue: Ready for Work Gate 4. Acknowledged. Issue is added to backlog and ready for development bug report labels Jul 28, 2016

vkorotun added the Component: Catalog label Aug 22, 2016

mmansoor-magento pushed a commit that referenced this issue Sep 20, 2016

MAGETWO-55608: [GITHUB] M2.1: Not scrollable picture on mobile / prod…

7597a52

…uct page #5302

SerhiyShkolyarenko closed this as completed Sep 20, 2016

ilol mentioned this issue Sep 20, 2016

[2.1.0] Problem on mobile when catalog gallery allowfullscreen is false #5808

Closed

okorshenko pushed a commit that referenced this issue Dec 14, 2016

MAGETWO-55608: [GITHUB] M2.1: Not scrollable picture on mobile / prod…

b605058

…uct page #5302

magento-engcom-team pushed a commit that referenced this issue Feb 10, 2020

Merge pull request #5302 from magento-tsg-csl3/2.4-develop-pr12

90ea3f1

[TSG-CSL3] For 2.4 (pr3)

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

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

Comments

andidhouse commented Jun 28, 2016 • edited Loading

Steps to reproduce

Expected result

Actual result

andidhouse commented Jun 30, 2016

andidhouse commented Jul 19, 2016

ilol commented Jul 19, 2016

gazoscalvertos commented Aug 7, 2016

apurv-anand commented Aug 9, 2016

Simpsonight commented Aug 9, 2016

ghost commented Sep 6, 2016 • edited by ghost Loading

ghost commented Sep 7, 2016

andidhouse commented Sep 14, 2016

ghost commented Sep 14, 2016

ghost commented Sep 14, 2016

ilol commented Sep 15, 2016

ghost commented Sep 15, 2016

SerhiyShkolyarenko commented Sep 20, 2016

PaperDS commented Oct 10, 2016

ghost commented Oct 10, 2016

keyurshah commented Oct 12, 2016

ghost commented Oct 13, 2016

PaperDS commented Oct 13, 2016

jibrandlr commented Oct 13, 2016 • edited Loading

ghost commented Oct 13, 2016

jibrandlr commented Oct 13, 2016

sshymko commented Nov 16, 2016

erikhansen commented Nov 17, 2016 • edited Loading

yofisim commented Nov 23, 2016

giusecapo commented Nov 24, 2016

yofisim commented Nov 24, 2016 • edited Loading

giusecapo commented Nov 24, 2016 • edited Loading

yofisim commented Nov 24, 2016

giusecapo commented Nov 24, 2016

yofisim commented Nov 24, 2016

giusecapo commented Nov 24, 2016

giusecapo commented Nov 24, 2016

yofisim commented Nov 24, 2016 • edited Loading

yofisim commented Nov 24, 2016 • edited Loading

jmtakahashi commented Dec 5, 2016

yofisim commented Dec 5, 2016 via email

jmtakahashi commented Dec 6, 2016

yofisim commented Dec 6, 2016 via email

jmtakahashi commented Dec 6, 2016

andidhouse commented Dec 8, 2016

elenleonova commented Dec 15, 2016

andidhouse commented Dec 15, 2016

erik-augustin commented Dec 18, 2016

through-a-haze commented Jan 26, 2017

andidhouse commented Jun 28, 2016 •

edited

Loading

ghost commented Sep 6, 2016 •

edited by ghost

Loading

jibrandlr commented Oct 13, 2016 •

edited

Loading

erikhansen commented Nov 17, 2016 •

edited

Loading

yofisim commented Nov 24, 2016 •

edited

Loading

giusecapo commented Nov 24, 2016 •

edited

Loading

yofisim commented Nov 24, 2016 •

edited

Loading

yofisim commented Nov 24, 2016 •

edited

Loading