Bug div drop-shadow bug quando i bambini sono animati con jQuery in Internet Explorer 9

Question

Quando a un div padre è applicato un css drop shadow, ei suoi figli sono animati con jQuery in modo che il div genitore cambi altezza, strane linee sotto il il div principale appare quando si visualizza la pagina in IE9. Ecco un esempio: http://jsfiddle.net/vPqxb/11/ e uno screenshot:

Per chi vuole solo vedere il codice; qui è il codice HTML:

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

, il 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; 
} 

e JavaScript (si noti che il primo richiede 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":""}); 
    }); 
}); 

Le mie domande sarebbero;

1. Si tratta di un bug jQuery o di Internet Explorer?
2. Riesci a trovare un modo per aggirarlo? (Internet Explorer 9 non supporta le transizioni quindi non ne sono sicuro)

Grazie mille per qualsiasi aiuto.

Answer 1

This question è simile, e credo che la risposta che ho proposto sia pertinente.

In breve: http://jsfiddle.net/DwApF/12/

spiegazione completa: https://stackoverflow.com/a/8676063/453277

Answer 2

Il tuo codice è un po 'complicato. Non sapevo esattamente quale fosse il tuo comportamento desiderato, ma mi sembra più agevole, e mi sento come se IE9 lo gestisse meglio, ma non ero in grado di testarlo.

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

Ho aggiornato il JS Fiddle. Mi sembra che abbia a che fare con lo .stop(true,true).