Cannot slide images in product page in mobile in 2.4.6 only! #37232

cptX · 2023-03-16T21:08:41Z

Preconditions and environment

Magento version 2.4.6 (in 2.4.5 was working!!)
Luma Theme

Steps to reproduce

Create a product with more than one image, 3 or 4 would be perfect!
In the product page, using a mobile or mobile view try to slide images to the left (or to the right) with your finger!
Images are not sliding and not changing at all, the slider is not responding. Only way to see the next image is to click on the tiny dot under the image.
I consider this major bug (as usual unexplained regression once again...)

Expected result

The images should slide following the finger of the user!

Actual result

Only the first image of the product is displayed and user is completely unable to view the rest images! This is major bug!!!
Why magento is doing so often such basic regressions? Why simple things that used to work correctly are breaking down the road in every release??

Additional information

No response

Release note

No response

Triage and priority

Severity: S0 - Affects critical data or functionality and leaves users without workaround.
Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

m2-assistant · 2023-03-16T21:08:43Z

Hi @cptX. Thank you for your report.
To speed up processing of this issue, make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, Add a comment to the issue:

@magento give me 2.4-develop instance - upcoming 2.4.x release
For more details, review the Magento Contributor Assistant documentation.
Add a comment to assign the issue: @magento I am working on this
To learn more about issue processing workflow, refer to the Code Contributions.

Join Magento Community Engineering Slack and ask your questions in #github channel.
⚠️ According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.
🕙 You can find the schedule on the Magento Community Calendar page.
📞 The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

mrtuvn · 2023-03-17T02:06:53Z

Can you record video mobile show your web ? android or ios firms
So this issue happen on real mobile devices only
Last but not least , Do you have any custom or module product view ?

m2-assistant · 2023-03-17T03:05:04Z

Hi @engcom-Dash. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: 👇

1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
1. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
1. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
1. Verify that the issue is reproducible on 2.4-develop branch
  Details
  - Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!

Join Magento Community Engineering Slack and ask your questions in #github channel.

engcom-Dash · 2023-03-17T05:55:23Z

@magento give me 2.4.6 instance

magento-deployment-service · 2023-03-17T05:55:26Z

Hi @engcom-Dash. Thank you for your request. I'm working on Magento instance for you.

magento-deployment-service · 2023-03-17T06:00:48Z

Hi @engcom-Dash, here is your Magento Instance: https://dd3ebb1b87e8648213f0060c16627297.instances-prod.magento-community.engineering
Admin access: https://dd3ebb1b87e8648213f0060c16627297.instances-prod.magento-community.engineering/admin_c4de
Login: a6f7d1ab
Password: f8491178f767

engcom-Dash · 2023-03-17T07:20:20Z

@magento give me 2.4-develop instance

magento-deployment-service · 2023-03-17T07:20:23Z

Hi @engcom-Dash. Thank you for your request. I'm working on Magento instance for you.

magento-deployment-service · 2023-03-17T07:26:00Z

Hi @engcom-Dash, here is your Magento Instance: https://cfe24c18561a2f21c44d921f8db2c17e.instances-prod.magento-community.engineering
Admin access: https://cfe24c18561a2f21c44d921f8db2c17e.instances-prod.magento-community.engineering/admin_0b42
Login: 141d0427
Password: 2a1f33db3721

cptX · 2023-03-17T07:52:55Z

@mrtuvn hi, I don't have another camera available to record a video on the physical phone but anyway there is no point to show a video. If you just visit the product page in a mobile phone you cannot slide right or left the images of the product. The first image stays frozen on the screen and this is MAJOR BUG.
Also this is a Luma theme. No custom modules installed. I have the exact same copy of the site with 2.4.5 and it works there. This functionality clearly broke in 2.4.6 without changing anything else!
Really disappointed. In every update fundamental functionality breaks every time. Magento was proud of anouncing 300 bug fixes, but they didn't report that 300 new bugs were introduced. I already discovered 2 new bugs the very first day of it's release!
Is anybody doing any fundamental testing in the dev team? How is this even possible to break?

mrtuvn · 2023-03-17T08:33:35Z

so can you share you website to product link accessible at version 2.4.6 ? It's will easy and faster way to figure exactly problem inmho
Another faster way you can also post in general area at slack channel if anyone in there maybe get same your problem

cptX · 2023-03-17T08:49:34Z

@mrtuvn I don't understand your request. As you see above a new magento instance has been created. You just have to visit it. For your convenience check this product in mobile view with touch enabled or just from your mobile phone
https://cfe24c18561a2f21c44d921f8db2c17e.instances-prod.magento-community.engineering/radiant-tee.html
The two images cannot be slided sideways!

cptX · 2023-03-17T08:54:11Z

https://developer.adobe.com/open/magento/slack

I was not aware of this group. Tried to register but it says the invitation sent to me was expired. How can I join this group?

mrtuvn · 2023-03-17T09:02:36Z

yes i see your point here
Seem in real device (mine used ios 16.3.1) i can't swipe left right on image anymore. The only way to navigate is use orange dot

cptX · 2023-03-17T09:33:10Z

This is major bug and I'm glad that you verified this!
I'm new to magento and I'm shocked of how easy and often standard functionality breaks on every update!! How in the world did this break??

cptX · 2023-03-17T09:34:21Z

Please provide a patch asap, I need to publish my site next week and this is a major blocking issue!!!

roma84 · 2023-03-17T10:24:09Z

As a fast fix, you can revert the following commit: d1c5ccf
Tested, and it works fine for me after reverting the code at line 1143.

engcom-Dash · 2023-03-17T11:10:19Z

@magento give me 2.4.6 instance

magento-deployment-service · 2023-03-17T11:10:22Z

Hi @engcom-Dash. Thank you for your request. I'm working on Magento instance for you.

thomas-weaverpsp · 2023-03-17T11:12:53Z

Can report this is also happening to me after I upgrade my site yesterday from 2.4.5 to 2.4.6.

magento-deployment-service · 2023-03-17T11:15:52Z

Hi @engcom-Dash, here is your Magento Instance: https://dd3ebb1b87e8648213f0060c16627297.instances-prod.magento-community.engineering
Admin access: https://dd3ebb1b87e8648213f0060c16627297.instances-prod.magento-community.engineering/admin_2ffc
Login: 0d4180c6
Password: f35dd672b07d

thomas-weaverpsp · 2023-03-17T11:23:56Z

@roma84 I tried to implement this fix suggested but still not working on my site.

roma84 · 2023-03-17T12:07:51Z

@roma84 I tried to implement this fix suggested but still not working on my site.

It worked for me on 2.4.6. You need to clear and re-generate static content after the change.

Maybe the following fix is correct for line 1143 in file fotorama.js:

el.addEventListener ? el.addEventListener(e, fn, {passive: !!bool}) : el.attachEvent('on' + e, fn);

magento-deployment-service · 2024-03-18T05:20:04Z

Hi @engcom-Hotel. Thank you for your request. I'm working on Magento instance for you.

magento-deployment-service · 2024-03-18T05:27:10Z

Hi @engcom-Hotel, here is your Magento Instance: https://cfe24c18561a2f21c44d921f8db2c17e.instances-prod.magento-community.engineering
Admin access: https://cfe24c18561a2f21c44d921f8db2c17e.instances-prod.magento-community.engineering/admin_8689
Login: 0a40d3a3
Password: 5a2b38153a7b

engcom-Hotel · 2024-03-18T07:42:02Z

Hello @MagePsycho,

We have again checked this issue in the test instance containing latest development branch ie 2.4-develop and the issue is not reproducible for us.

Please refer to the below screencast for reference:

WhatsApp.Video.2024-03-18.at.1.07.33.PM.mp4

The related JIRA shows the fixed version of this issue as 2.4.7-beta1.

Thanks

MagePsycho · 2024-03-18T07:51:34Z

@engcom-Hotel
Thanks for verifying the issue.

I can see this issue in Magento 2.4.6-p4 though.

gntlby · 2024-04-04T13:00:26Z

This one FIXED for me Change the following method in fotorama.js

function addEvent(el, e, fn, bool) {
        if (!e) return;
        el.addEventListener ? el.addEventListener(e, fn, !!bool) : el.attachEvent('on' + e, fn);
    }

to

function addEvent(el, e, fn, bool) {
        if (!e) return;
        const options = {
            get passive() {
                return e === 'wheel';
            }
        }
        el.addEventListener ? el.addEventListener(e, fn, options) : el.attachEvent('on' + e, fn);
    }

I am using 2.4.6-p4 and It was fixed after this change.
Thank you so much @MagePsycho

Skyfly2021 · 2024-06-25T14:48:12Z

Thanks, in magento 2.4.6-p6 also solved the sliding problem in mobile!

sfritzsche · 2024-07-02T08:39:05Z

Due to the latest update (Magento 2.4.7-p1), we have taken another look at the corrections. The adjustments fix the problem with swiping. However, the addEvent method was not adapted correctly.

The current structure of the method (in Magento 2.4.7-p1) looks like this:

function addEvent(el, e, fn, bool) {
    if (!e) return;
    el.addEventListener ? el.addEventListener(e, fn, {passive: !!bool}) : el.attachEvent('on' + e, fn);
}

The 4th parameter ("bool") is currently forwarded to the "passive" option. This was not originally intended. See the "addFocus" method (in Magento 2.4.7-p1):

function addFocus(el, fn) {
    addEvent(el, 'focus', el.onfocusin = function (e) {
        fn.call(el, e);
    }, true);
}

As already described in the previous comment, the "addFocus" method already existed before the "passive" option was introduced.

The intention of addFocus or the call to addEvent was therefore to use the "capture" option with the 4th parameter.

It was also an excellent suggestion to set the "passive" option based on the EventType ("wheel").

The addEvent method should therefore be structured as follows:

function addEvent(el, e, fn, bool) {
    if (!e) return;
    const options = {
        get passive() {
            return e === 'wheel';
        }
        get capture() {
            return !!bool;
        }
    }
    el.addEventListener ? el.addEventListener(e, fn, options) : el.attachEvent('on' + e, fn);
}

engcom-Dash · 2024-07-03T04:00:28Z

@magento give me 2.4-develop instance

magento-deployment-service · 2024-07-03T04:00:31Z

Hi @engcom-Dash. Thank you for your request. I'm working on Magento instance for you.

magento-deployment-service · 2024-07-03T04:07:36Z

Hi @engcom-Dash, here is your Magento Instance: https://cfe24c18561a2f21c44d921f8db2c17e.instances-prod.magento-community.engineering
Admin access: https://cfe24c18561a2f21c44d921f8db2c17e.instances-prod.magento-community.engineering/admin_eaca
Login: 3b9a1c9f
Password: c6b56cac73a1

engcom-Dash · 2024-07-03T07:06:18Z

Hi @cptX

Thanks for reporting and collaboration.

I verified the issue on both Magento 2.4 dev instance and Magento 2.4.7-p1.

The issue is not reproducible.

Able to slide images on product page on mobile

Please refer to the attached screen recording

37232-1.mov

DannyDaemonic · 2024-07-08T00:53:52Z

For me it does work in Chrome "mobile" mode as displayed in the previous post's video, but it doesn't work on real mobile devices running Chrome.

engcom-Bravo · 2024-07-08T06:36:24Z

@magento give me 2.4-develop instance

magento-deployment-service · 2024-07-08T06:36:28Z

Hi @engcom-Bravo. Thank you for your request. I'm working on Magento instance for you.

magento-deployment-service · 2024-07-08T06:43:38Z

Hi @engcom-Bravo, here is your Magento Instance: https://cfe24c18561a2f21c44d921f8db2c17e.instances-prod.magento-community.engineering
Admin access: https://cfe24c18561a2f21c44d921f8db2c17e.instances-prod.magento-community.engineering/admin_6038
Login: 4389e65d
Password: f084477b4ded

engcom-Bravo · 2024-07-08T08:09:17Z

Hi @DannyDaemonic,

Thanks for your update.

We have verified the issue in Latest 2.4-develop instance using real mobile device using chrome and the issue is no more reproducible.Kindly refer the attached video.

Screenrecorder-2024-07-08-12-28-11-470.mp4

We are able to slide the images in a mobile device.

Hence we are closing this issue.

Thanks.

DannyDaemonic · 2024-07-08T11:02:17Z

@engcom-Bravo Thanks for taking a look. Not to be pedantic, but were you sliding the image with your finger or were you tapping on the dots at the bottom?

The feature that was lost wasn't the use of the dots below the image, but the actual dragging of the image with your finger.

engcom-Bravo · 2024-07-09T06:41:48Z

Hi @DannyDaemonic,

Thanks for your update.

We have tried with the fingers for sliding the images in a mobile device.Kindly let us know if we are missing anything.

Thanks.

Flipmediaco · 2024-09-04T23:00:01Z

Found the mobile interaction with fotorama gallery to be an issue Magento ver. 2.4.6-p6

Following the threads on this issue the following commit resolves the issue: 9d751c5#diff-fb7ac60e407ee78fc8e5ff56eef13de3f3bbe8a8ce52c14d674f0015f502e7c7

m2-community-project bot added the Issue: ready for confirmation label Mar 16, 2023

engcom-Dash self-assigned this Mar 17, 2023

mrtuvn added Reported on 2.4.6 Indicates original Magento version for the Issue report. Component: Catalog Area: Frontend and removed Component: Catalog labels Mar 17, 2023

engcom-Dash reopened this Jul 3, 2024

m2-community-project bot removed Issue: Confirmed Gate 3 Passed. Manual verification of the issue completed. Issue is confirmed Reproduced on 2.4.x The issue has been reproduced on latest 2.4-develop branch Progress: done labels Jul 3, 2024

m2-community-project bot added the Progress: dev in progress label Jul 3, 2024

engcom-Dash added the Issue: needs update Additional information is require, waiting for response label Jul 3, 2024

engcom-Bravo closed this as completed Jul 8, 2024

m2-community-project bot added Progress: done and removed Progress: dev in progress labels Jul 8, 2024

Cannot slide images in product page in mobile in 2.4.6 only! #37232

Cannot slide images in product page in mobile in 2.4.6 only! #37232

Comments

cptX commented Mar 16, 2023

Preconditions and environment

Steps to reproduce

Expected result

Actual result

Additional information

Release note

Triage and priority

m2-assistant bot commented Mar 16, 2023

mrtuvn commented Mar 17, 2023 • edited Loading

m2-assistant bot commented Mar 17, 2023

engcom-Dash commented Mar 17, 2023

magento-deployment-service bot commented Mar 17, 2023

magento-deployment-service bot commented Mar 17, 2023

engcom-Dash commented Mar 17, 2023

magento-deployment-service bot commented Mar 17, 2023

magento-deployment-service bot commented Mar 17, 2023

cptX commented Mar 17, 2023

mrtuvn commented Mar 17, 2023 • edited Loading

cptX commented Mar 17, 2023

cptX commented Mar 17, 2023

mrtuvn commented Mar 17, 2023 • edited Loading

cptX commented Mar 17, 2023

cptX commented Mar 17, 2023

roma84 commented Mar 17, 2023

engcom-Dash commented Mar 17, 2023

magento-deployment-service bot commented Mar 17, 2023

thomas-weaverpsp commented Mar 17, 2023

magento-deployment-service bot commented Mar 17, 2023

thomas-weaverpsp commented Mar 17, 2023

roma84 commented Mar 17, 2023

magento-deployment-service bot commented Mar 18, 2024

magento-deployment-service bot commented Mar 18, 2024

engcom-Hotel commented Mar 18, 2024

MagePsycho commented Mar 18, 2024

gntlby commented Apr 4, 2024 • edited Loading

Skyfly2021 commented Jun 25, 2024

sfritzsche commented Jul 2, 2024

engcom-Dash commented Jul 3, 2024

magento-deployment-service bot commented Jul 3, 2024

magento-deployment-service bot commented Jul 3, 2024

engcom-Dash commented Jul 3, 2024

DannyDaemonic commented Jul 8, 2024 • edited Loading

engcom-Bravo commented Jul 8, 2024

magento-deployment-service bot commented Jul 8, 2024

magento-deployment-service bot commented Jul 8, 2024

engcom-Bravo commented Jul 8, 2024

DannyDaemonic commented Jul 8, 2024

engcom-Bravo commented Jul 9, 2024

Flipmediaco commented Sep 4, 2024 • edited Loading

mrtuvn commented Mar 17, 2023 •

edited

Loading

mrtuvn commented Mar 17, 2023 •

edited

Loading

mrtuvn commented Mar 17, 2023 •

edited

Loading

gntlby commented Apr 4, 2024 •

edited

Loading

DannyDaemonic commented Jul 8, 2024 •

edited

Loading

Flipmediaco commented Sep 4, 2024 •

edited

Loading