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

Chrome new version issue after zooming in #242

Closed natilevy closed 3 years ago

natilevy commented 3 years ago

Hi, I have an issue with the new version of chrome 93 and d3 zoom when used in combination with a d3 map. For each x level of zoom new SVG elements are rendered on the map and are clickable but when zooming in to a scale more than X , all mouse events on the map stop working - There isn’t even an option to inspect the rendered elements on the map. I also removed from the inspector the g element which includes all the paths of the map - so all I had left was the SVG wrapper and inside of it the items rendered on map and still there wasn’t an option to inspect and mouse events do not work. It acts as if the elements have pointer-events: none but this is not the case, and happens even when pointer-events is set to all. This issue only happens on chrome version 93, where support of the clipboard API was added for SVG elements, so this new issue may be related to that. All other browsers (Safari, Firefox, etc.) the click event still works.

Fil commented 3 years ago

Can you share a web page where we could reproduce the error. I have Chrome 93.0.4577.63 (arm64 on macos) and no issue with e.g. https://observablehq.com/@fil/map-pan-zoom or https://observablehq.com/@d3/versor-zooming

natilevy commented 3 years ago

It was a problem with the element - foreignObject (anything under this element wasnt clickable after zoom update ) the last chrome update somehow solve this issue.