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/

Answer 1

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.

Answer 2

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