When a parent div has a css drop-shadow applied, and its children is animated

Question

0

Asked: May 27, 20262026-05-27T23:10:27+00:00 2026-05-27T23:10:27+00:00

When a parent div has a css drop-shadow applied, and its children is animated

0

When a parent div has a css drop-shadow applied, and its children is animated with jQuery so that the parent div changes height, strange lines below the parent div appear when viewing the page in IE9. Here is an example: http://jsfiddle.net/vPqxb/11/ and a screenshot:

enter image description here

For the one who just want to see the code; here is the HTML:

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

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

and the JavaScript (note that the first one requires 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":""});
    });
});

My questions would be;