-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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
Comments
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? |
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? |
Just a note, i've posted a possible solution to this issue in #7701 (comment). |
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! |
Is there any update for this issue? |
Thanks for the update @adamcbrewer |
I have experimented with 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 |
@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) 🤞 |
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.
This change accounts for scale during DOM events processing and fixes #6079
mapbox-gl-js version: 0.44.0
Steps to Trigger Behavior
transform scale(0.9)
on map container,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.
The text was updated successfully, but these errors were encountered: