diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb0433244..8800b2fa1 100644
--- 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
index a9bc93d85..b824b2180 100644
--- a/sandbox/tests/pointer/index.html
+++ b/sandbox/tests/pointer/index.html
@@ -5,6 +5,14 @@
Pointer
+
Click on the squares to see events propagate in z order in the console. The black square cancels the event preventing propagation.
diff --git a/sandbox/tests/pointer/pointer.ts b/sandbox/tests/pointer/pointer.ts
index 34f45b153..826db611e 100644
--- 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
index b762d6621..8535513b6 100644
--- a/src/engine/Util/Util.ts
+++ b/src/engine/Util/Util.ts
@@ -1,4 +1,4 @@
-import { Vector } from '../Math/vector';
+import { Vector, vec } from '../Math/vector';
import { Clock } from './Clock';
import { Future } from './Future';
@@ -6,27 +6,9 @@ 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(parent.offsetParent);
- }
- };
- const calcOffsetTop = (parent: HTMLElement) => {
- oTop += parent.offsetTop;
- if (parent.offsetParent) {
- calcOffsetTop(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);
}
/**