Correct mouse/touch position for elements scaled via CSS transform

mapbox · Dec 3, 2019 · 9c94661 · 9c94661
1 parent ba2d04d
commit 9c94661
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/css/mapbox-gl.css b/src/css/mapbox-gl.css
@@ -15,6 +15,11 @@
     background-color: salmon;
 }
 
+.mapboxgl-canvas-container {
+    width: 100%;
+    height: 100%;
+}
+
 .mapboxgl-canvas-container.mapboxgl-interactive,
 .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
     cursor: -webkit-grab;

diff --git a/src/util/dom.js b/src/util/dom.js
@@ -107,8 +107,8 @@ DOM.mousePos = function (el: HTMLElement, e: MouseEvent | window.TouchEvent | To
     const rect = el.getBoundingClientRect();
     const t = window.TouchEvent && (e instanceof window.TouchEvent) ? e.touches[0] : e;
     return new Point(
-        t.clientX - rect.left - el.clientLeft,
-        t.clientY - rect.top - el.clientTop
+        (t.clientX - rect.left - el.clientLeft) * el.clientWidth / rect.width,
+        (t.clientY - rect.top - el.clientTop) * el.clientHeight / rect.height
     );
 };
 
@@ -118,8 +118,8 @@ DOM.touchPos = function (el: HTMLElement, e: TouchEvent) {
     const touches = (e.type === 'touchend') ? e.changedTouches : e.touches;
     for (let i = 0; i < touches.length; i++) {
         points.push(new Point(
-            touches[i].clientX - rect.left - el.clientLeft,
-            touches[i].clientY - rect.top - el.clientTop
+            (touches[i].clientX - rect.left - el.clientLeft) * el.clientWidth / rect.width,
+            (touches[i].clientY - rect.top - el.clientTop) * el.clientHeight / rect.height
         ));
     }
     return points;