Error div shadow-drop padre cuando children está animado con jQuery en Internet Explorer 9

Question

Cuando un div principal tiene una sombra paralela css aplicada, y sus hijos están animados con jQuery para que el div principal cambie de altura, líneas extrañas debajo del div parental aparece cuando se ve la página en IE9. Aquí está un ejemplo: http://jsfiddle.net/vPqxb/11/ y una captura de pantalla:

Para el que sólo quieren ver el código; aquí está el código HTML:

<div class="parent"> 
    <div class="longer">&nbsp;</div> 
</div> 

, el CSS:

div.parent { 
    background: #ddd; 
    box-shadow: 1px 1px 2px 1px #c9c7c9; 
    width: 80%; 
} 

div div { 
    background: red; 
    height: 10px; 
    width: 30px; 
} 

.longer { 
    height: 200px; 
} 

y el código JavaScript (tenga en cuenta que el primero requiere jQuery UI):

$("a.toggleclass").on("click", function() { //some trigger, doesn't matter where 
    div.stop(true,true).toggleClass("longer", 1000); 
}); 

$("a.animate").on("click", function() { //another one without jQuery UI 
    div.stop(true,true).animate({"height":"20px"}, function() { 
     div.attr({"style":""}); 
    }); 
}); 

Mis preguntas serían;

1. ¿Se trata de un jQuery o un error de Internet Explorer?
2. ¿Puedes encontrar una forma de evitarlo? (Internet Explorer 9 no es compatible con las transiciones, así que no tengo ni idea)

Muchas gracias por cualquier ayuda.

Answer 1

This question es similar, y creo que la respuesta que propuse es pertinente.

En resumen: http://jsfiddle.net/DwApF/12/

explicación completa: https://stackoverflow.com/a/8676063/453277

Answer 2

Su código es un poco complicado. No podía decir exactamente cuál era tu comportamiento deseado, pero parece más suave, y creo que IE9 lo manejaría mejor, pero no pude probarlo.

$("a.toggleclass").click(function() { 
    $('.parent').animate({height: 1000}, '1000'); 
}); 

He actualizado su JS Fiddle. Siento que tiene que ver con el .stop(true,true).