8

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.

Ege Özcan
  • 12,341
  • 2
  • 28
  • 50
  • I've asked the similar question here http://stackoverflow.com/questions/8675773/shadow-artifacts-during-animation-in-ie9 and curious if you have found any workarounds – zerkms Dec 30 '11 at 04:22

2 Answers2

4

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

Community
  • 1
  • 1
Tim Medora
  • 51,363
  • 11
  • 111
  • 149
-1

Your code is a bit complicated. I couldn't exactly tell what your desired behavior was, but this is looking smoother, and I feel like IE9 would handle it better, but I wasn't able to test.

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

I updated your JS Fiddle. I feel like it has to do with the .stop(true,true).

nickcoxdotme
  • 5,612
  • 8
  • 39
  • 65
  • 1
    My code doesn't try to do anything other than pointing to a bug in IE9: When you reduce the height of the children, some lines appear. It is obvious in my "js fiddle" example. You could add a comment if you needed more information. I appreciate the effort but this answer has nothing to do with the question as you don't even reduce the height. Please don't answer questions just to answer them because you are reducing the chance that it gets a proper answer. Thank you. – Ege Özcan Nov 28 '11 at 07:56