Shadow artifacts during animation in IE9

Question

Here are css, html and js to reproduce:

html:

<div id="outer">
    <div>123</div>
    <div id="inner">345</div>
</div>

css:

#outer {
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.3);
}

#inner {
    height: 200px;
}

js:

$(function() {
    $('#outer').click(function() {
        $('#inner').slideUp();
    });
});

and http://jsfiddle.net/DwApF/ as well

Any workarounds for this issue?

Answer 1

Attempt #1

http://jsfiddle.net/DwApF/3/

This hides the shadow and then restores it after the slide is complete. It's a hack of a solution but this is a manner in which a variety of behaviors can be circumvented.

Attempt #2

http://jsfiddle.net/DwApF/11/

This does a simultaneous animation of both outer and inner containers. It slides the drop shadow with no artifacts. However, you will need to manually manipulate the height of the outer container, and also deal with hiding the contents of the inner container. It does eliminate the artifact issue though.

Attempt #3 - My Preferred Solution

http://jsfiddle.net/DwApF/12/

This still uses a simultaneous animation of both outer/inner containers. I see no artifacts in IE9. It also handles hiding the inner container's content using overflow: hidden.

The sizing of the outer container still must be done manually, but I think this is an adequate solution. There should be a way to determine the collapsed height using jQuery so that this value doesn't need to be hard-coded.

This solution works in IE9, Chrome, and Firefox. Note that I have added some colors/borders so that it's easier to see the different containers.

Answer 2

The bad news is that the bug is worse in IE10. The good news is that this simple rule seems to fix it - at least it does in IE10. Since IE9 supports the :after pseudo class, it should also work.

.Element:after {
content: ".";
font-size: 1px;
display: inline;
overflow: hidden;
}

Replace .Element with either the class name or ID (#Element) of the object that shows the artifact.

In IE9, often assigning overflow: hidden will work - though that does not work in IE10.