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