Animar un div dentro de td provoca un comportamiento errático en Chrome

Question

Estoy construyendo un widget de interfaz de usuario bastante complicado que tiene algunos problemas en Chrome. Yo era capaz de aislar el problema y estoy lucimiento al http://jsfiddle.net/8Kb3B/

He una div dentro de un td, y yo estoy tratando de cambiar el div con jQuery de .animate(). Lo que sucede en Chrome es que el td no vuelve a crecer cuando el div vuelve a su ancho original. Además, si prestas mucha atención al final de la animación "ocultar", verás que el ancho de td parpadea brevemente con el ancho del contenido de div, lo que me parece extraño.

Lo mismo sucede cuando se usa .toggle(delay). Si utilizo .toggle() sin demora, todo funciona según lo previsto.

La animación funciona correctamente en las ofertas de Mozilla e incluso en IE.

¿Me está faltando algo realmente simple aquí?

Answer 1

Intento desde mi lado puede ser que eso te ayude. Escribir como esto para navegadores basados ​​webkit:

@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; 
    } 
} 

Comprobar esto por más http://jsfiddle.net/8Kb3B/3/