Ошибка отбрасывания тени родительского div при анимации дочерних элементов с помощью jQuery в Internet Explorer 9

Когда к родительскому div применена тень css, а его дочерние элементы анимированы с помощью jQuery, так что родительский div меняет высоту, при просмотре страницы в IE9 появляются странные строки под родительским div. Вот пример: http://jsfiddle.net/vPqxb/11/ и снимок экрана:

Для тех, кто просто хочет увидеть код; вот HTML:

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

и JavaScript (обратите внимание, что первый требует 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":""});
    });
});

Мои вопросы:

1. Это ошибка jQuery или Internet Explorer?
2. Можете ли вы найти способ обойти это? (Internet Explorer 9 не поддерживает переходы, поэтому я ничего не знаю)

Большое спасибо за любую помощь.