Mobile zoom too sensitive?

[Pascal-So]

Describe the bug

When zooming on mobile with two fingers moving away from each other, the zoom-in action happens faster than what users are used to from other zoom implementations.

Here's a side-by-side comparison showcasing the difference

On the left side you see the image viewer of the duckduckgo.com image search, on the right side the example page of zoom-image using @zoom-image/core 0.34.0. The recordings were both done on a Sony Xperia 1 II phone running Android 12 with Firefox 125.3.0.

Note that the recordings show the finger positions used for the zoom gesture. In the left recording, the finger locations don't move relative to the underlying image point, i.e. the finger that starts on the eye of the cat remains on the eye throughout the gesture. In the zoom-image implementation, the fingers both start on a balloon each, but then both end up pointing at the sky because the balloons move out way quicker.

I think it would be more intuitive for users if zoom-image were to emulate the more common behaviour.

Reproduction

this repo's own vanilla/svelte examples: https://stackblitz.com/github/willnguyen1312/zoom-image/tree/main/examples/with-vanilla

Used Package Manager

npm

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is available

[Pascal-So]

The culprit seems to be these lines here: createZoomImageWheel.ts#L210-L217. No matter how much the distance increases or decreases, the same delta is applied.

I feel like it should be possible to just replace the delta with Math.log(curDistance / prevDistance) / finalOptions.wheelZoomRatio which would work for both zooming in and out without case distinction. However, while testing this out locally I'm getting some buggy behaviour. I'll keep experimenting a bit more.

[willnguyen1312]

Hi Pascal, sorry for my late response. I was occupied at work. I'm going to have a look later today. Thanks :)