IE9中动画期间的阴影伪影答案

【问题标题】：Shadow artifacts during animation in IE9IE9中动画期间的阴影伪影
【发布时间】：2012-01-30 08:07:30
【问题描述】：

这里有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/

此问题的任何解决方法？

【问题讨论】：

+1 - 这确实是一种令人讨厌的行为。

标签： jquery html css internet-explorer-9

【解决方案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。请注意，我添加了一些颜色/边框，以便更容易看到不同的容器。

【讨论】：

我认为没有。看起来像一个 IE9 错误，also mentioned here
@JoshSmith - 感谢您链接该问题；我发布了解决方案 #3 作为答案。
@zerkms - 我认为同步动画（解决方案#3）可能是一个可行的解决方案。
好吧，不幸的是overflow: hidden; 技巧不适用于我的开发代码（这比示例稍微复杂一些），但这是我应该自己解决的挑战。谢谢:-)
我遇到了完全相同的问题（stackoverflow.com/questions/8180922）。那么，这绝对是一个错误？无论如何，很好的答案；谢谢！

【解决方案2】：

坏消息是 IE10 中的 bug 更严重。好消息是这个简单的规则似乎可以解决它——至少在 IE10 中是这样。由于 IE9 支持 :after 伪类，它应该也可以工作。

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

将 .Element 替换为显示工件的对象的类名或 ID (#Element)。

在 IE9 中，通常分配 overflow: hidden 会起作用 - 尽管这在 IE10 中不起作用。

【讨论】：

你能把最初的 jsfiddle 做相应的修改吗？
效果很好，使用 line-height: 0 和 content: " " 效果更好
beautifull 这正是我需要的解决方案。只需要更改content: " "; height: 0;

【解决方案3】：

这个解决方案对我有用 - 只需同时为父级的 box-shadow 属性设置动画：

$(function() {
    $('#outer').click(function() {
        $('#inner').slideUp();
        $(this).animate({'box-shadow': '0px 3px 2px rgba(0, 0, 0, 0.3)'});
    });
});

【讨论】：

【解决方案4】：

这似乎对我有用：只需将 div 包装在 另一个 div 中，并在外部 div 上使用这些样式

padding-bottom: 10px;
padding-right: 0px;
overflow: visible

不知道为什么这对我有用。

【讨论】：

【解决方案5】：

我的解决方案是将我想要消失的 DIV 放在前面提到的 另一个 DIV 中......但是......我没有对其应用任何特殊样式.相反，我所做的只是使用 jQuery 来定位新的父 DIV 并使其消失。

它为我摆脱了那些烦人的阴影伪影。（在 IE10 上）

【讨论】：