zoom translation inconsistency on elements with 'transform: scale'
opened this issue · comments
When zooming (or dragging) a div element with 'transform: scale(-1)' css, the movement goes in a different direction comparing to svg. This is creating a problem for us, because there is some other logic dependent on that drag that i can not easily change. How can i make div behave like an svg in that case?
I am trying to understand whether the issue is with d3.zoom, or with the browser handling mouse events differently on elements with 'transform: scale' applied. Here is a link to an observable notebook:
The zoom behavior uses d3.pointer to get the location of the pointer, and this function only supports transforms on SVG elements because they implement element.getScreenCTM. HTML elements may support similar functionality in the future if the GeometryUtils specification is implemented by browsers; this provides element.convertPointFromNode. Unfortunately, it’s not easy to polyfill the GeometryUtils specification, and I have no plans to do so in D3.