After a pointer lock with Chrome, if you move the mouse, MouseEvent.movementX and MouseEvent.movementY will sometimes return a very large number that seems to be around half the size of the window.
Here is a minimal code example:
<html>
<body>
<canvas id="canvas" width="100" height="100" style="border: 1px solid">
</canvas>
<script>
var canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", function() {
canvas.requestPointerLock();
});
document.addEventListener("mousemove", function() {
if(Math.abs(event.movementX) > 100)
console.log(event.movementX);
});
</script>
</body>
</html>
My hunch is that when you call requestPointerLock() it doesn't actually lock the mouse in one position, but just hides it. When the mouse goes off the window then it snaps the mouse back to the center which causes a large spike in the variable.
What is the cause of the large spike and how can I fix it?
