de acuerdo a

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

mouseleave se dispara cuando el puntero ha salido del elemento y todos sus descendientes.

Sin embargo, en Safari, este evento se activa tan pronto como el mouse ingresa al elemento y se mueve dentro de él. creé un violín

 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'));

En Chrome, FireFox en Mac funciona como debería. Sin embargo, Safari emite mouseleave aunque no debería.

¿Hay algo que pueda hacer para obtener el mismo comportamiento en Safari que en Chrome o FireFox?

EDITAR:

Creé un GIF que muestra el problema:

https://imgur.com/a/G2csKmo