Mouse panning breaks zoom on Android (panMode: "mousemove")

[zackpyle]

Describe the bug

When you enable mouse panning, it seems to break Android zooming. After you pinch to zoom in, you can't pinch to zoom our or back in or pan. It freezes. The toolbar buttons work, and you can exit, or move to the next gallery image. But once you pinch to zoom, and then let go, it stops working on that image.

Reproduction

Using Android Chrome:

1. Tap the image to open fancybox
2. Use fingers to pinch to zoom in
3. Release fingers
4. You can no longer use fingers to zoom, or to drag the enlarged image, you can only use the toolbar buttons

Note - Works as intended on iphone

Tested on a real Android phone (Galaxy A54) and in Browserstack (Galaxy S23 set using "real device" not emulation)

Additional context

Fancybox.bind('[data-fancybox="gallery"]', {
    loop: true,
    contentClick: "toggleMax",
    Images: {
        Panzoom: {
            maxScale: 2,
            panMode: "mousemove",
            mouseMoveFactor: 1.1,
            mouseMoveFriction: 0.12,
        }
    }
});

Commenting out these 3 lines fixes it:

// panMode: "mousemove",
// mouseMoveFactor: 1.1,
// mouseMoveFriction: 0.12,

[fancyapps]

Hi,

First of all, you actually were not supposed to set mousemove mode for mobile devices because mobile devices don't have a mouse. But I'll take a look at what's so different about Android that causes this problem.

[zackpyle]

Ok thanks! Is there a way to disable mousemove on mobile then? I just have it set like shown above for the page it is on (meaning it currently applies to all screen sizes)

[fancyapps]

You simply set options based on your conditions, for example:

if (YOUR_CONDITION) {
  Fancybox.bind('[data-fancybox]', {
    // Options
  });
} else {
  Fancybox.bind('[data-fancybox]', {
    // Other options
  });
}

[zackpyle]

Ok, can do. Is it expected to have to go through and enable or disable various features based on screen size/device?

[fancyapps]

Sorry, I do not understand the question. What do you have in mind?

btw, another trick is to pass a method as an option, example:

Fancybox.bind('[data-fancybox]', {
  compact: false,
  contentClick: () => {
    return window.innerWidth > 500 ? "toggleMax" : "toggleCover";
  }
});  

https://jsfiddle.net/5t0hpsbq/

[zackpyle]

Ok thanks. My question is basically based on your first response, is the expectation for me to turn off mousemove on mobile? Or should that be handled by Panzoom mousemove to check if it is possible to even run?

Like should it be checking itself with something like .on('touchstart' or .on('mousemove', to know if it can run or not?

[fancyapps]

To be honest, the script just binds mousemove event and I am not sure (I might not remember it correctly, I wrote that part quite some time ago), but think I hoped that it would just would not trigger on devices without a mouse :)

[zackpyle]

Haha, yeah. I probably would have guessed the same. Well, thanks for taking a look. Let me know if you find a fix for why it is treating Android differently 👍🏻

[galbeni]

@fancyapps @zackpyle Hi! I experienced the same bug on android devices. Zackpyle described it perfectly! This is the only issue I experienced that should be fixed: After I pinch to zoom in, I can't pinch to zoom out or back in or pan. Specifically it freezes! When I pinch zoom on any android devices on the opened fancybox modal then I stop the pinch zoom after that I can't move it anymore, it freezes. I need to refresh the page. On iPhone works properly as zackpyle wrote! Alternatively can I disable pinch zoom on the modal on android devices temporarily?