translate3d() causando eventi di hover/clic jQuery per non attivare correttamente

Question

Quando si analizzano eventi del mouse jQuery su diversi tipi di Animazione CSS, si nota che translate3d causa il passaggio del mouse e altri eventi non correttamente.

In un esempio di base, sto animando un elenco di blocchi da destra a sinistra.

In caso di rollover, sto impostando lo sfondo LI librato su VERDE.

nota: i test sono costruiti per 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

Come potete vedere nel violino accompagnato, translate3d mostra hover molto erotici mentre la traduzione è ok.

qualcuno ha qualche indizio sul motivo per cui questo è?

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

Answer 1

Ti aspetti hover deve essere attivato quando il mouse è fermo e un obiettivo si sposta sotto il mouse? Gli eventi vengono inviati solo quando il mouse è in movimento o si fa clic su un pulsante se si richiama correttamente. Se il mouse non sta facendo nulla, nulla si innescherà, incluso il passaggio del mouse. Gli eventi sono basati sull'input dell'utente, quindi se non vi è alcun input da parte dell'utente, non ci sono eventi.

Si può vedere che se si sposta il mouse lentamente avanti e indietro sugli elementi, lo stato di passaggio del mouse funzionerà correttamente. Il problema sembra solo apparire se non si sposta il mouse.

Cioè, a meno che mi manca il problema, quindi per favore chiarire se non sto capendo.

Answer 2

Questo è un problema noto. Chrome non invoca l'effetto di passaggio del mouse di un elemento quando l'elemento viene visualizzato sotto un cursore del mouse visibile, spostandosi o diventando visibile.

Controllare questo: https://code.google.com/p/chromium/issues/detail?id=246304