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.