Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mouse events are shifted after a css transform scale on the map container #6079

Closed
fxi opened this issue Jan 29, 2018 · 9 comments · Fixed by #10096
Closed

Mouse events are shifted after a css transform scale on the map container #6079

fxi opened this issue Jan 29, 2018 · 9 comments · Fixed by #10096
Labels

Comments

@fxi
Copy link

fxi commented Jan 29, 2018

mapbox-gl-js version: 0.44.0

Steps to Trigger Behavior

  1. Create a map,
  2. Set transform scale(0.9) on map container,
  3. Use map.resize() to update the canvas.

Example : https://jsfiddle.net/fxi/gb5jqssu/

Expected Behavior

All mouse events should match the updated map.

Actual Behavior

All mouse events are slightly shifted.

@mourner mourner added bug 🐞 needs investigation 🔍 Issues that require further research (e.g. it's not clear whether it's GL JS or something else) labels Mar 15, 2018
@azei
Copy link

azei commented Apr 1, 2018

I'm running in to this issue as well. Scaling both shifts zooming in/out as well as making the map hard to pan.

Has anyone found a workaround?

@adamcbrewer
Copy link

adamcbrewer commented Jan 24, 2019

Same here, also struggling with this and the only way around that I can see is to write custom interactions for all scroll and touch events.

Perhaps a scale-offset property could be added to the API?

@adamcbrewer
Copy link

Just a note, i've posted a possible solution to this issue in #7701 (comment).

@adamcbrewer
Copy link

So I've just submitted a proposed PR ☝️ for this issue. The functionality works, but once I've had feedback I'll continue with the implementation and writing tests. Any eyes-on would be appreciated!

@asheemmamoowala asheemmamoowala removed the needs investigation 🔍 Issues that require further research (e.g. it's not clear whether it's GL JS or something else) label Mar 12, 2019
@rgazelot
Copy link

Is there any update for this issue?

@adamcbrewer
Copy link

@rgazelot unfortunately not as the conversation in #8017 means not using css transforms and rather going down the line of using offsetX and offsetY. However I don't believe this is a solid solution until there's a way to prevent panning/dragging when the mouse/cursor leaves the map bounds.

@rgazelot
Copy link

Thanks for the update @adamcbrewer

@anvaka
Copy link

anvaka commented Nov 6, 2020

I have experimented with offsetX and offsetY based solution. While it does work and correctly returns local coordinates of an element inside CSS-transformed tree, it doesn't work for touch devices.

One promising direction to explore would be to use pointer events, like pointerdown. MDN reports this as not supported by Safari, however this simple test https://output.jsbin.com/garuceh worked in both iOS simulator's Safari and desktop Safari. It also worked in Firefox, Chrome for Android and desktop.

I understand that changing input model to pointers events could be a big switch, but hopefully the right one in the long term.

As potential mid-term patch we could experiment with firing a pointerdown event, let the browser do the transformation to local coordinates, and grab it back. I got this proof of concept working here https://output.jsbin.com/sadorac for almost all devices except Chrome for Android, which unlike other browser doesn't perform correct translation of clientX to offsetX on synthetic event.

@adamcbrewer
Copy link

@anvaka I had managed to implement an offsetX/Y for touch devices by providing a scale value, though only in my fork.

It's been well over a year since I've revisited this issue, but I think you're right in that pointer events could be the solution...if I remember correctly. I'm hoping that Sarafi is actually supported (as you say) 🤞

kawsndriy added a commit to kawsndriy/mapbox-gl-js that referenced this issue Nov 13, 2020
When map container belongs to a CSS transformed tree,
the `getBoundingClientRect()` based solutions report incorrect
coordinates.

This change accounts for scale during DOM events
processing and fixes mapbox#6079

This solution would not work for the cases when css transform includes
rotation or skew. But should serve as a decent band-aid for the case of
simple scaling.
ryanhamley pushed a commit that referenced this issue Feb 12, 2021
This change accounts for scale during DOM events
processing and fixes #6079
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
7 participants