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:
For the one who just want to see the code; here is the HTML:
<div class="parent">
<div class="longer"> </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;
Thank you very much for any help.
This question is similar, and I believe the answer I proposed is pertinent.
In brief: http://jsfiddle.net/DwApF/12/
Full explanation: https://stackoverflow.com/a/8676063/453277
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With