title: translate3d() causing jQuery hover/click events to not fire correctly
body: <p>When analyzing jQuery mouse events on different CSS Animation types, I'm noticing that translate3d causes hover and other events to not fire correctly.</p>
  
  <p>In a basic example, I am animating a list of blocks from right to left.</p>
  
  <p>On rollover, I am setting the hovered LI background to GREEN.</p>
  
  <p><em>note: tests are built for webkit</em> </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;div class="container"&gt;
      &lt;ul&gt;
          &lt;li&gt;content&lt;/li&gt;
          &lt;li&gt;content&lt;/li&gt;
          ...
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$('.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');
  });
  </code></pre>
  
  <p>As you can see in the accompanied fiddle, translate3d is showing very erradic jQuery hovers while translate is ok. </p>
  
  <p>anyone have any clues as to why this is?</p>
  
  <p><a href="http://jsfiddle.net/jkusachi/j2PSw/2/">http://jsfiddle.net/jkusachi/j2PSw/2/</a></p>