Moving pointer position evaluation to getBoundingClientRect

Babylon/babylon.scene.js

@@ -172,14 +172,23 @@
             return this._renderId;
         };
 
+        Scene.prototype._updatePointerPosition = function (evt) {
+            var canvas = this._engine.getRenderingCanvas();
+
+            var canvasRect = canvas.getBoundingClientRect();
+
+            this._pointerX = evt.clientX - canvasRect.left;
+            this._pointerY = evt.clientY - canvasRect.top;
+        };
+
         // Pointers handling
         Scene.prototype.attachControl = function () {
             var _this = this;
             this._onPointerMove = function (evt) {
                 var canvas = _this._engine.getRenderingCanvas();
 
-                _this._pointerX = evt.offsetX || evt.layerX;
-                _this._pointerY = evt.offsetY || evt.layerY;
+                _this._updatePointerPosition(evt);
+
                 var pickResult = _this.pick(_this._pointerX, _this._pointerY, function (mesh) {
                     return mesh.actionManager && mesh.isPickable && mesh.isVisible && mesh.isReady();
                 });
@@ -205,7 +214,9 @@
                     };
                 }
 
-                var pickResult = _this.pick(evt.offsetX || evt.layerX, evt.offsetY || evt.layerY, predicate);
+                _this._updatePointerPosition(evt);
+
+                var pickResult = _this.pick(_this._pointerX, _this._pointerY, predicate);
 
                 if (pickResult.hit) {
                     if (pickResult.pickedMesh.actionManager) {

Babylon/babylon.scene.ts

@@ -241,13 +241,22 @@
             return this._renderId;
         }
 
+        private _updatePointerPosition(evt: PointerEvent): void {
+            var canvas = this._engine.getRenderingCanvas();
+
+            var canvasRect = canvas.getBoundingClientRect();
+
+            this._pointerX = evt.clientX - canvasRect.left;
+            this._pointerY = evt.clientY - canvasRect.top;
+        }
+
         // Pointers handling
         public attachControl() {
             this._onPointerMove = (evt: PointerEvent) => {
                 var canvas = this._engine.getRenderingCanvas();
 
-                this._pointerX = evt.offsetX || evt.layerX;
-                this._pointerY = evt.offsetY || evt.layerY;
+                this._updatePointerPosition(evt);
+
                 var pickResult = this.pick(this._pointerX, this._pointerY, (mesh: AbstractMesh): boolean => mesh.actionManager && mesh.isPickable && mesh.isVisible && mesh.isReady());
 
                 if (pickResult.hit) {
@@ -272,7 +281,9 @@
                     };
                 }
 
-                var pickResult = this.pick(evt.offsetX || evt.layerX, evt.offsetY || evt.layerY, predicate);
+                this._updatePointerPosition(evt);
+
+                var pickResult = this.pick(this._pointerX, this._pointerY, predicate);
 
                 if (pickResult.hit) {
                     if (pickResult.pickedMesh.actionManager) {