bumbu/svg-pan-zoom

touch-based pinch-zoom using Hammer.js does not keep image centered during zoom when parent container is offset to the right of the screen

Open

#350 opened on Sep 17, 2019

View on GitHub
 (4 comments) (0 reactions) (0 assignees)JavaScript (1,585 stars) (383 forks)batch import
bughelp wanted

Description

I place two div's side-by-side and apply the recommended event handler usage with Hammer.js:

https://github.com/ariutta/svg-pan-zoom/blob/master/demo/mobile.html

I put together a small demo here:

http://jsfiddle.net/ngkq6L2m/9/

The leftmost container pinch-zooms as expected. However, the rightmost container does not keep the coordinate under the pinch centered while the zoom is occurring. Instead the whole SVG slides left during zoom-in and right during zoom-out. It seems as though some part of the library (not sure if it is svg-pan-zoom or Hammer.js) is assuming that the leftmost pixel offset of the parent container is 0, and when it is positive the appropriate translation is calculated incorrectly.

Contributor guide

Tech stack
javascript
Domain
frontendmobile
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
needs investigation
Prerequisites
JavaScriptSVG basicsHammer.js
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the pinch zoom logic in the svg pan zoom library, focusing on how touch coordinates are transformed relative to the parent container. Examine the demo/mobile.html file and the relevant handlers that use Hammer.js. Check if the library incorrectly assumes the parent container's leftmost offset is 0, causing the translation to be miscalculated when the container is offset to the right. Compare the behavior between the left and right containers as shown in the provided JSFiddle demo.