search

d3 / d3-zoom

Pan and zoom SVG, HTML or Canvas using mouse or touch input.
https://d3js.org/d3-zoom
ISC License
507 stars 143 forks source link

example pan & zoom III doesn't work correctly on android #172

Closed JamesYFC closed 5 years ago

JamesYFC commented 5 years ago

On android (tested with 2 different tablets in chrome browser) If you alternate between touch and dragging in the example demo area to pan the whole view (Pan & Zoom III) and then outside of it to scroll the page, the touch and drag events will not work properly back in the demo area.

Compare this behaviour to Drag & Zoom II, where it works.

The .call(d3.zoom ...) is called on a rect within the \<g> in pan & zoom III, whereas in drag & zoom II the zoom behaviour is called on the \<svg> parent.

I had the same problem in the project I was working on and calling the zoom behaviour on the \<svg> parent instead fixed it too.

mbostock commented 5 years ago

Strange. I can’t think of why it wouldn’t work, but it seems like a browser bug.

souljorje commented 3 years ago

d3-zoom doesn't work properly on Android if zoom is called on <g> element, need to call it on <svg>. Faced the same problem and tested it on OnePlus 8, Android v10, Chrome and Samsung Galaxy, Android v10, Chrome.