Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Parent div drop-shadow bug when children is animated with jQuery in Internet Explorer 9

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;

  1. Is this a jQuery or an Internet Explorer bug?
  2. Can you find a way around it? (Internet Explorer 9 doesn't support transitions so I am clueless)

Thank you very much for any help.

like image 567
Ege Özcan Avatar asked Nov 18 '11 10:11

Ege Özcan


1 Answers

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

like image 176
Tim M. Avatar answered Nov 15 '22 05:11

Tim M.