Quiero dibujar en un lienzo transformado en 3D, pero tengo algunos problemas extraños con el evento mouseout en Chrome.

Cuando configuro el tamaño de la ventana JSFiddle en 2100 px, el evento mouseout funciona como excepción.

Sin embargo, cuando configuro el tamaño de la ventana en 1900 px, el evento del mouse se activa aproximadamente en la línea roja.

Esto es realmente extraño, ya que el tamaño de la ventana JSFiddle determina si el evento de mouse out se activa correctamente.

Hasta aquí, el evento de mouse out se activa correctamente en Firefox y Edge, ¡pero no funciona correctamente en Chrome! Además, vimos un comportamiento extraño al jugar con la posición de desplazamiento (p. ej., al agregar algunos <br> y el desplazamiento afecta la posición del evento con el mouse fuera), los tamaños de ventana (ver imágenes de arriba) o el ancho del lienzo (p. ej. establecer el ancho del lienzo en 200 activa el evento de salida del mouse correctamente).

¿Hay alguien que pueda ayudarme a resolver este error, de modo que el navegador active el evento mouseout correctamente independientemente del tamaño de la ventana o la posición de desplazamiento?

Código: JSFiddle

Demostración: YouTube

Fragmento de código en violín:

 $(".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>