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 (383 forks)batch import
bughelp wanted

Repository metrics

Stars
 (1,585 stars)
PR merge metrics
 (No merged PRs in 30d)

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

Research direction
Investigate the coordinate transformation in the zoom handler. The bug occurs when the SVG container is not at the screen origin. Check how Hammer.js events are normalized and how svg pan zoom applies the zoom offset. Ensure that the pinch center is correctly mapped to SVG coordinates relative to the container's bounding box.
Tech stack
javascript
Domain
frontend
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.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
JavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60