MouseOver MouseOut issue in Safari/Chrome

Question

This is a strange one, I'm shocked I've never noticed it before. It works like this, if your mouse is still and a div programmatically moves underneath your mouse, a mouseover event will not be triggered in Chrome/Safari - same goes for mouseout. Of course, if you move your mouse slightly once the div has moved underneath your mouse it will work as expected.

I created a demo on jsFiddle. Just let the div oscillate under your mouse, works fine in Firefox, not in Chrome or Safari - have yet to test in IE.

I'm leaning toward this solution... basically rolling my own mouseenter and mouseleave events using this:

if (mouseX > divLeft && mouseX < divRight &&
    mouseY > divTop && mouseY < divBottom){
    // mouse is inside div
}

I say mouseenter and leave because this method would have no bubbling

I was wondering if anyone else had thoughts about this... I have a feeling there is an easy way around it, but so far google hasn't turned anything up.

Answer 1

https://bugs.webkit.org/show_bug.cgi?id=4117

You might find this bug interesting.