I want to draw on a 3D-transformed canvas, but have some weird problems with the mouseout event in Chrome.

When I set the JSFiddle window size to 2100px, the mouseout event works as excepted.

However, when I set the window size to 1900px, the mouse event triggers approximately at the red line.

This is really weird, since the JSFiddle window size determines if the mouse out event is triggered correctly.

Until here the mouse out event is triggered correctly in Firefox and Edge, but doesn't work correctly in Chrome! In addition, we saw some weird behaviour when playing around with the scrolling position (e.g. by adding some <br>'s and scrolling affects the mouse out event position), window sizes (see images above) or the width of the canvas (e.g. setting the canvas width to 200 triggers the mouse out event correctly).

Is there anyone who can help me solving this bug, such that the browser fires the mouseout event correctly independent of the window size or scroll position?

Code: JSFiddle

Demo: YouTube

Snippet of code in fiddle:

$(".dynamic-drawing-canvas").on("mouseout", function(e) {
  console.log(e.clientX, e.clientY)
})

#container {
  pointer-events: none;
  margin-left: 400px;
}

.dynamic-drawing-canvas {
  pointer-events: auto;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <canvas class="dynamic-drawing-canvas" width="1200" height="300" style="
    transform: matrix3d(1.0303, 0.00317459, 0, 2.13211e-05, -0.68458, -0.165542, 0, -0.00111181, 0, 0, 1, 0, -34.7412, 264.118, 0, 1);
    transform-origin: left top;
"></canvas>
</div>