Mouseenter/Mouseover events do not fire if CSS3 translate/transform is used to change element position

Question

I am translating ( via jQuery / CSS3 ) a #wrapper div, by updating Y axis.

I've attached mouseenter / mouseleave events to child elements of #wrapper.

When #wrapper translates, its child comes under mouse one by one ( even if mouse does not move ). And this does not fire the mouseenter , mouseleave events.

However, events are fired when element has scrollbar and scrolled by mousewheel ( instead of translating ).

Is this a default behavior ? If yes, any workaround ?

Demo

Try scrolling with mousewheel, without moving mouse. I expect to change the background of .block to red color, but it's not happening.

Answer 1

Example:

document.elementFromPoint(x, y);

Definition from Here:

Returns the element from the document whose elementFromPoint method is being called which is the topmost element which lies under the given point. To get an element, specify the point via coordinates, in CSS pixels, relative to the upper-left-most point in the window or frame containing the document.

Browser support from Here:

• Internet Explorer 5.5+
• Mozilla FireFox 3+
• Safari Win 5+
• Google Chrome 4+
• Opera 10.53+

Solution 1 Working Example*:

var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function(event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;
});
$(containerElement).mousewheel(function(event) {
    $(elementClass).trigger('mouseleave');
    var element = document.elementFromPoint(currentMousePos.x, currentMousePos.y);
    $(element).trigger('mouseenter');
});

^{* there are some bugs, but you get the idea}

Solution 2:

Use debounce from lodash or underscore libraries, to reduce load on client.

var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function (event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;
});
var debounced = _.debounce(function () {
    $(elementClass).trigger('mouseleave');
    var element = document.elementFromPoint(currentMousePos.x, currentMousePos.y);
    $(element).trigger('mouseenter');
}, 150);
$(containerElement).mousewheel(function (event) {
    debounced();
});