title: Firing Mouseout Event depends on Window Size
body: <p>I want to draw on a 3D-transformed canvas, but have some weird problems with the mouseout event in Chrome.</p>
  <p>When I set the JSFiddle window size to 2100px, the mouseout event works as excepted.</p>
  <p><a href="https://i.stack.imgur.com/DJb2z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DJb2z.png" alt="enter image description here" /></a></p>
  <p>However, when I set the window size to 1900px, the mouse event triggers approximately at the red line.</p>
  <p><a href="https://i.stack.imgur.com/qd5Oc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qd5Oc.png" alt="enter image description here" /></a></p>
  <p>This is really weird, since the JSFiddle window size determines if the mouse out event is triggered correctly.</p>
  <p>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 <code>&lt;br&gt;</code>'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).</p>
  <p>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?</p>
  <p>Code: <a href="https://jsfiddle.net/90nr8sdy/60/" rel="nofollow noreferrer">JSFiddle</a></p>
  <p>Demo: <a href="https://youtu.be/fXY1Vg9kgHk" rel="nofollow noreferrer">YouTube</a></p>
  <p>Snippet of code in fiddle:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".dynamic-drawing-canvas").on("mouseout", function(e) {
    console.log(e.clientX, e.clientY)
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    pointer-events: none;
    margin-left: 400px;
  }
  
  .dynamic-drawing-canvas {
    pointer-events: auto;
    background-color: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;
    &lt;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;
  "&gt;&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>