www.auchan.fr - site is not usable

[manuc66]

URL: https://www.auchan.fr/p-M1209496/gallery?index=0&firstcolor=

Browser / Version: Firefox 59.0
Operating System: Linux
Tested Another Browser: Unknown

Problem type: Site is not usable
Description: Pan on the image is not usable
Steps to Reproduce:
Open the image an push the left button down while moving the mouse.

The image does not move as is does on chrome

layout.css.servo.enabled: true

From webcompat.com with ❤️

[karlcow]

Yes confirmed.
When trying to pan the image, the full image is trying to be moved on Firefox. There's something really different about the behavior.

[softvision-sergiulogigan]

I can reproduce this issue on Windows 10 and Nightly 61 as well.
The image is pan-able only after a short drag-and-drop of the image.
The Console does not display any errors or warnings during the panning.

[karlcow]

on macos

1. Click on the image with holding the click and move
2. After short pan it tries to catch the full image
3. Release the click
4. The image is still selected and can be panned
5. click again, the image is released not locked in pan mode.

[karlcow]

This seems to refer to a mobile lib.
https://www.auchan.fr/_ui/v1528_738d5b5827c2/mobile/js/gallery.mobilefirst.lazy.min.js

Let's try with another product on macos.
https://www.auchan.fr/abri-de-jardin-bois-ivalo-2-01m/p-c430205

Using the same library.
Probably related to

A.zoom.handlePanUpdate = function (t) {
  if (!A.utils.isTrue(A.zoom.canMoveMouseForZoom)) {
    if ('panmove' == t.type && A.zoom.scale != A.zoom.minScale) {
      A.zoom.posX = A.zoom.lastPosX + t.deltaX,
      A.zoom.posY = A.zoom.lastPosY + t.deltaY;
      var e = A.zoom.scale / A.zoom.scaleStepper;
      A.zoom.maxPosX = Math.ceil(e * A.zoom.galleryItemsEl[A.zoom.zoomIndex].clientWidth / 2),
      A.zoom.maxPosY = Math.ceil(e * A.zoom.galleryItemsEl[A.zoom.zoomIndex].clientHeight / 2),
      A.zoom.posX > A.zoom.maxPosX && (A.zoom.posX = A.zoom.maxPosX),
      A.zoom.posX < - A.zoom.maxPosX && (A.zoom.posX = - A.zoom.maxPosX),
      A.zoom.posY > A.zoom.maxPosY && (A.zoom.posY = A.zoom.maxPosY),
      A.zoom.posY < - A.zoom.maxPosY && (A.zoom.posY = - A.zoom.maxPosY),
      A.zoom.handlePanTransform()
    }
    'panend' == t.type && (A.zoom.lastPosX = A.zoom.posX, A.zoom.lastPosY = A.zoom.posY)
  }
},

I wonder if the velocity computation of the image moving is the same in Firefox and Chrome.

(note they seem to be using https://www.kameleoon.com/en/ which does A/B testing)

[karlcow]

A.zoom.handlePanTransform = function () {
  1 == A.zoom.scale && (A.zoom.posX = 0, A.zoom.posY = 0),
  A.zoom.transform = 'translate3d(' + A.zoom.posX + 'px,' + A.zoom.posY + 'px, 0) ',
  A.zoom.galleryItemsEl[A.zoom.zoomIndex].style.webkitTransform = A.zoom.transform
},

This is a case here @digitarald where it is very hard to inspect events. Le's say you put a breaking point inside handlePanTransform(). The debugger will stop at the first interaction with the image but not necessary when we are inside the function. Then come an infinite not very fruitful, step forward dance to try to reach whichever meaningful part there is. :) Unsuccessful for this specific case.

[karlcow]

@denschub Do you have a strategy to handle these cases?

[karlcow]

ok they use https://hammerjs.github.io/recognizer-pan/ which has panmove
Hammer.js seems to not be maintained anymore 289b57c on Jul 26, 2014 and 224 issues opened.

and there are issues with pan events.
hammerjs/hammer.js#1007

In the code https://www.auchan.fr/_ui/v1566_738d5bea9ff4/mobile/js/gallery.mobilefirst.lazy.min.js

this is the part which is listening on panmove and panend.

A.zoom.currentHammerInstance.on("panmove panend", A.zoom.handlePanUpdate)

with DITM, I have set some console.log into handlePanTransform and handlePanUpdate and it's easy to see that there are not always executed which means that the events are sometimes not fired.

ah and this seems to be pretty close.
hammerjs/hammer.js#1092

Let's move this to needscontact.

[karlcow]

onmousedown="if (event.preventDefault) event.preventDefault()" will probably fix the issue.

[adamopenweb]

Reaching out via website contact form:
https://www.auchan.fr/portail/contact

[cipriansv]

I retested the issue and it is still reproducible on my side.

Tested with:
Browser / Version: Firefox Nightly 69.0a1 (2019-06-18)
Operating System: Windows 10 Pro

[softvision-oana-arbuzov]

The issue still occurs.
Updated URL: https://www.auchan.fr/p-M3635506/gallery?index=0&firstcolor=

Tested with:
Browser / Version: Firefox Nightly 90.0a1 (2021-05-13)
Operating System: Ubuntu 20.04.2, Windows 10 Pro

[softvision-oana-arbuzov]

The layout has changed, and the product is no longer available.
I've checked with different products and panning functionality is no longer available. I can only zoom out to see the larger image.

Tested with:
Browser / Version: Firefox Nightly 101.0a1
Operating System: Ubuntu 20.04.2

[inv_16/2022]

[manuc66]

@softvision-oana-arbuzov Once You've zoomed in, can you pan like you want ? I've a glitch on my side

[softvision-oana-arbuzov]

Thanks @manuc66. After checking on Windows, and zooming in max the image, I can move the product, but indeed it is not smooth on Firefox.
URL: https://www.auchan.fr/tvt-e-bikes-velo-a-assistance-electrique-suv-e-bike-hauteur-cadre-45-cm-or/pr-C1389585

Tested with:
Browser / Version: Firefox Nightly 102.0a1 (2022-05-03)
Operating System: Windows 10 Pro

Reopening the issue and moving back to Sitewait.

[inv_18/2022]