jquery - IE9 动画期间的阴影伪像

Question

下面是要重现的css、html和js:

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();
    });
});

和http://jsfiddle.net/DwApF/还有

这个问题有什么解决方法吗？

Answer 1

尝试#1

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

这会隐藏阴影，然后在幻灯片完成后恢复它。这是一种破解解决方案，但这是一种可以规避各种行为的方式。

尝试 #2

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

这会对外部容器和内部容器同时进行动画处理。它滑动阴影而没有伪影。但是，您需要手动操作外部容器的高度，还要处理隐藏内部容器的内容。不过，它确实消除了伪影问题。

尝试 #3 - 我的首选解决方案

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

这仍然使用外部/内部容器的同步动画。我在 IE9 中看不到任何瑕疵。它还使用 overflow: hidden 处理隐藏内部容器的内容。

外部容器的大小仍然必须手动完成，但我认为这是一个合适的解决方案。应该有一种方法可以使用 jQuery 确定折叠高度，这样这个值就不需要硬编码了。

此解决方案适用于 IE9、Chrome 和 Firefox。请注意，我添加了一些颜色/边框，以便更容易看到不同的容器。