fix: Allow CSS transforms on canvas (#2910)

This PR fixes an issue where CSS transforms confused the excalibur pointer system and caused clicks to land in the wrong spot
excaliburjs · Feb 1, 2024 · 80c960b · 80c960b
1 parent c1e6900
commit 80c960b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -156,6 +156,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
+- Fixed issue where using CSS transforms on the canvas confused Excalibur pointers
 - Fixed issue with *AndFill suffixed [[DisplayModes]]s where content area offset was not accounted for in world space
 - Fixed issue where `ex.Sound.getTotalPlaybackDuration()` would crash if not loaded, now logs friendly warning
 - Fixed issue where an empty constructor on `new ex.Label()` would crash

diff --git a/sandbox/tests/pointer/index.html b/sandbox/tests/pointer/index.html
@@ -5,6 +5,14 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Pointer</title>
+  <style>
+    canvas {
+      position: relative;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, 50%);
+    }
+  </style>
 </head>
 <body>
   <p>Click on the squares to see events propagate in z order in the console. The black square cancels the event preventing propagation.</p>

diff --git a/sandbox/tests/pointer/pointer.ts b/sandbox/tests/pointer/pointer.ts
@@ -66,7 +66,7 @@ var game2 = new Game2({
   width: 600,
   height: 400,
   antialiasing: false,
-  displayMode: ex.DisplayMode.FitScreenAndFill
+  displayMode: ex.DisplayMode.Fixed
 });
 game2.debug.collider.showBounds = true;
 game2.debug.graphics.showBounds = true;

diff --git a/src/engine/Util/Util.ts b/src/engine/Util/Util.ts
@@ -1,32 +1,14 @@
-import { Vector } from '../Math/vector';
+import { Vector, vec } from '../Math/vector';
 import { Clock } from './Clock';
 import { Future } from './Future';
 
 /**
  * Find the screen position of an HTML element
  */
 export function getPosition(el: HTMLElement): Vector {
-  let oLeft: number = 0,
-    oTop: number = 0;
-
-  const calcOffsetLeft = (parent: HTMLElement) => {
-    oLeft += parent.offsetLeft;
-
-    if (parent.offsetParent) {
-      calcOffsetLeft(<HTMLElement>parent.offsetParent);
-    }
-  };
-  const calcOffsetTop = (parent: HTMLElement) => {
-    oTop += parent.offsetTop;
-    if (parent.offsetParent) {
-      calcOffsetTop(<HTMLElement>parent.offsetParent);
-    }
-  };
-
-  calcOffsetLeft(el);
-  calcOffsetTop(el);
-
-  return new Vector(oLeft, oTop);
+  // do we need the scroll too? technically the offset method before did that
+  const rect = el.getBoundingClientRect();
+  return vec(rect.x + window.scrollX, rect.y + window.scrollY);
 }
 
 /**