BabylonJS - Debugging click position on scrolled page

When HTML page scrolled, the ActionEvent is not correctly positionned

by Lio Vousk-prod.

HTML

<script src="http://vousk-prod.net/webgl/babyl/includes/hand.minified-1.3.4.js"></script>
<script src="http://vousk-prod.net/webgl/babyl/includes/babylon.1.13-beta.js"></script>
<div id="space1" class="some_space">&nbsp;</div>
<canvas id="canvas_3d"></canvas>
<div class="some_space">&nbsp;</div>

CSS

body {
    background: #236478;
}
#space1 {
    position: relative;
    top: 40px;
}
#canvas_3d {
    position: relative;
    width : 600px;
    height: 400px;
    top: -25px;
    left: 30px;
    border: 1px dashed white;
}
.some_space {
    background: yellow;
    width : 2000px;
    height: 150px;
    border: 1px dotted yellow;
}

JavaScript

var canvas = document.getElementById("canvas_3d");

console.debug(canvas);
console.debug("canvas.style.left:", canvas.style.left, "canvas.style.top:", canvas.style.top, "canvas.clientWidth:", canvas.clientWidth, "canvas.height:", canvas.height, " canvas.offsetLeft:", canvas.offsetLeft, "canvas.offsetTop:", canvas.offsetTop, "$(window).scrollLeft:", $(window).scrollLeft(), "$(window).scrollTop: ", $(window).scrollTop());
console.debug("canvas.getBoundingClientRect:", canvas.getBoundingClientRect());

var engine = new BABYLON.Engine(canvas, true);
var scene = createScene(engine, canvas);

window.addEventListener("pointerdown", onPointerDown, false);

engine.runRenderLoop(function () {
    scene.render();
});

function createScene(engine, canvas) {
    var scene = new BABYLON.Scene(engine);

    // Setup environment
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
    camera.setPosition(new BABYLON.Vector3(20, 200, 400));
    camera.attachControl(canvas);

    camera.lowerBetaLimit = 0.1;
    camera.upperBetaLimit = (Math.PI / 2) * 0.99;
    camera.lowerRadiusLimit = 150;

    scene.clearColor = new BABYLON.Color3(0, 0, 0);

    var light1 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);
    var light2 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);
    var light3 = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), scene);

    light1.diffuse = BABYLON.Color3.Red();
    light2.diffuse = BABYLON.Color3.Green();
    light3.diffuse = BABYLON.Color3.Blue();

    // Ground
    var ground = BABYLON.Mesh.CreateGround("ground", 1000, 1000, 1, scene, false);
    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
    groundMaterial.specularColor = BABYLON.Color3.Black();
    ground.material = groundMaterial;

    // Boxes
    var redBox = BABYLON.Mesh.CreateBox("red", 20, scene);
    var redMat = new BABYLON.StandardMaterial("ground", scene);
   ...