L'animazione di un div all'interno di td genera un comportamento irregolare in Chrome

Question

Sto costruendo un widget dell'interfaccia utente piuttosto complicato che presenta alcuni problemi in Chrome. Sono stato in grado di isolare il problema e sto in mostra è a http://jsfiddle.net/8Kb3B/

ho un div all'interno di un td, e sto cercando di attivare o disattivare la div con jQuery di .animate(). Quello che succede in Chrome è che lo td non ricresce quando lo div viene riportato alla sua larghezza originale. Inoltre, se presti molta attenzione alla fine dell'animazione "nascondi", vedrai che la larghezza dello td lampeggia brevemente alla larghezza del contenuto dello div, che trovo strano.

La stessa cosa accade quando si utilizza .toggle(delay). Se uso .toggle() senza ritardo, il tutto funziona come previsto.

L'animazione funziona correttamente nelle offerte di Mozilla e persino in IE.

Mi manca qualcosa di veramente semplice qui?

Answer 1

Provo da parte mia potrebbe essere che ti aiuta. Scrivi come questo per webkit browser basati:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    td { 
    padding-right:2px; 
    } 
    span{ 
    left:5px; 
    position:absolute; 
    } 
    #content { 
    border: 2px solid red; 
    width: 100px; 
    height:20px; 
    display:table; 
    overflow:hidden; 
    position:relative; 
    } 
} 

Controllare questo per più http://jsfiddle.net/8Kb3B/3/