Safari Mac 上的 MouseLeave 事件在错误条件下触发

Question

according to

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event

mouseleave is fired when the pointer has exited the element and all of its descendants.

However, on Safari this event is fired as soon the mouse enters the element and is moved inside of it. I created a fiddle

 document.getElementById('out').addEventListener('mouseleave', () => console.log('left'));

 .outer { width: 100px; height: 100px; background-color: green; } .inner { width: 50px; height: 50px; background-color: red; }

 <div class="outer" id="out"> <div class="inner"> </div> </div>

https://jsfiddle.net/hs5ea7cq/

document.getElementById('out').addEventListener('mouseleave', () => console.log('left'));

On Chrome, FireFox on Mac it works as it should. However, Safari emits mouseleave even so it should not.

Is there anything I can do to get the same behavior in Safari as in Chrome or FireFox?

EDIT:

I created a GIF which shows the issue:

https://imgur.com/a/G2csKmo

Answer 1

It seems to be related to TigerVNC usage. Switching to UltraVNC resolved the issue.