translate3d() causing jQuery hover/click events to not fire correctly

Question

When analyzing jQuery mouse events on different CSS Animation types, I'm noticing that translate3d causes hover and other events to not fire correctly.

In a basic example, I am animating a list of blocks from right to left.

On rollover, I am setting the hovered LI background to GREEN.

note: tests are built for webkit

HTML

 <div class="container">
    <ul>
        <li>content</li>
        <li>content</li>
        ...
    </ul>
</div>

CSS

.container{
    position: absolute;
    left: 600px;
    top: 0;
}   

.container ul{
    list-style: none;
    width: 9999px;
}

.container ul li{
    width: 200px;
    height: 400px;
    float: left;
    background: red;
    margin: 4px;
}

.animate-3d{
    -webkit-transition: -webkit-transform 10s linear;
    -webkit-transform: translate3d(-6000px, 0px, 0px)
}

.animate-transition{
    transition: left 10s linear;
    left: -6000px;
}

jQuery

$('.event').bind('click', function(){
    $('.container').addClass('animate-3d'); 
});

$('.event-transition').bind('click', function(){
    $('.container').addClass('animate-transition'); 
});

$('li').bind('mouseenter mouseleave', function(e){
    if(e.type == 'mouseenter')
        $(this).css('background', 'green');
    else
        $(this).css('background', 'red');
});

As you can see in the accompanied fiddle, translate3d is showing very erradic jQuery hovers while translate is ok.

anyone have any clues as to why this is?

http://jsfiddle.net/jkusachi/j2PSw/2/

Caretaker

I will note that the hovers work for translate3d after the animation has finished. Once animation has finished and you "reset" the animation, if you mouse in and out of the red onto the white area, it seems to trigger the mouseenter/mouseleave just not when your mouse is over the boxes...quite interesting... – Caretaker

Have you ever found a solution for this problem? – Turquoise

Answer 1

This is a known issue. Chrome does not invoke an element's hover effect when the element appears underneath a visible mouse cursor, either by moving or becoming visible.

Check this: https://code.google.com/p/chromium/issues/detail?id=246304

Woodcutter

Answer 2

Are you expecting hover to be triggered when the mouse is stationary and a target moves under the mouse? Events are only sent when the mouse is in motion or a button is clicked if I recall correctly. If the mouse isn't doing anything, then nothing will trigger, including hover. Events are based on user input, so if there is no user input, there is no event.

You can see that if you move the mouse slowly back and forth over the elements, the hover state will work properly. The problem only seems to appear if you do not move the mouse.

That is, unless I am missing the problem, so please clarify if I am not understanding.

Olathe

i am expecting the hover to be triggered on mouse movement. If you see in the attached video, even during mouse movement the hover does not get triggered with translate3d: stackoverflow-18496551.mov. The code itself is pretty basic so that is my questions. It works fine for transition, just not translate3d. – Caretaker

What specific browser, version and OS are you using? I couldn't replicate this on Safari, Chrome, Firefox or IE (VM) on OS X 10.7 – Olathe