MouseLeave Event on Safari Mac is triggered under wrong conditions

Question

according to

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>

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:

I can't replicate the issue? The log only fires in safari when the user's mouse leaves the green square. This is the same as Firefox and Chrome on macOS. — evolutionxbox
– evolutionxbox, Commented May 10, 2022 at 9:10
@evolutionxbox Thanks for trying. I created a video of the issue and linked it in the description. What Mac version you are on? What Safar version are you using? — bugAtron9000
– bugAtron9000, Commented May 10, 2022 at 10:11
Can't replicate it on Safari 15.2, macOS 11.6.4 either. What versions are you on @bugAtron9000? — ZeroZipZilch
– ZeroZipZilch, Commented May 10, 2022 at 11:42

bugAtron9000 · Accepted Answer · 2022-05-11 07:09:43Z

0

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

answered May 11, 2022 at 7:09

bugAtron9000

12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1