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

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