Allow zooming further with pinch gesture on mobile devices

[benface]

The problem

Trying the example at https://medium-zoom.francoischalifour.com on iOS Safari and trying to zoom further on "zoomed images" (images you clicked on) with the commonly used pinch gesture triggers the scroll event and "unzooms" the image. The browser zoom still works, allowing the user to zoom on "unzoomed images" but those images are usually lower resolution, so it defeats the purpose.

Solution

Detect the pinch gesture somehow and don't zoom out if that's the reason why the scroll event is triggered.

Thank you! :D

[gfellerph]

Can a pinch gesture be detected by inspecting the event.touches >= 2 property? This means that two or more fingers/pointers are involved. Say, if more than two "touches" are detected, don't close the image and let the browser do its thing.

[francoischalifour]

I haven't dug very much into the behavior but I think that the issue comes from somewhere else.

We dismiss the zoom when (simplified):

• The zoomed image is clicked
• The scroll position exceeds the original scroll position + the offset (40px by default)

My assumption is that when you pinch the image, the scroll position changes, causing the zoom to be dismissed.

We would therefore need to add a new condition in the scroll handling function to not close the zoom when the image is pinched:

https://github.com/francoischalifour/medium-zoom/blob/78e0974e37d0fa8fdf0486aa4046cf95263e8beb/src/medium-zoom.js#L36-L39

From reading the documentation on ToucheEvent.touches, it seems like we can change the state on touchstart and touchend when touches.length >= 2 (as pointed out by @tuelsch) to return early in this function.

That's only my assumption based on what I tried blindly on my phone.

If you've got time, feel free to send a PR!