IE10中的好奇翻译+溢出错误

时间:2013-09-05 07:45:34

标签: css internet-explorer css3 transform

在IE10(Windows 8,仅限Windows 8,包括RT)中,我有div overflow : auto,其中transition来自屏幕外部(CSS3 transform + {{1} }})

此转换结束后才会呈现此div(纯文本)的内容,即div似乎为空。

如果我设置overflow : hidden,问题就会消失。

此行为在此处转载:http://jsbin.com/inUsayU/5/ (此jsBin链接仅适用于IE10)

保持屏幕分割(如果没有拆分,添加CSS和HTML窗格),将鼠标悬停在第一个链接上,您应该看到div转换为空。尝试悬停第二个链接,其他div转换正常。您可能每次都必须使用“Run with JS”重新启动,因为通常(并非总是)问题只发生一次。

在我的项目中,我使用UA Sniffing破解了一个丑陋的解决方案并在转换前后切换overflow状态,但我希望您能提供更简单的解释/解决方案。

2 个答案:

答案 0 :(得分:1)

我在Windows 8.1上的Internet Explorer 11中进行了测试。我还测试了启用IE10仿真。此外,我在Windows Phone上的IE10中进行了测试。这是在Windows 7上进行的IE10测试的补充。在所有情况下,我都看到您报告的问题。我怀疑除了浏览器的错误之外还有别的东西。

关于您的实现,我建议避免使用-ms-transition,因为前缀属性被认为是实验性的。 Internet Explorer 10 supports the unprefixed transition property

我正在从http://modern.ie下载IE10虚拟机。一旦我站起来,我会再次测试这个并报告更新。

答案 1 :(得分:0)

我无法复制你的错误,但我猜测它可能是什么原因。

尝试在IE10 / 11中禁用硬件加速(在Internet选项>高级,应该像加速图形>禁用GPU和使用软件渲染 - 我的窗口是葡萄牙语,所以我没有确切的位置) ,重新启动Windows(可能是系统范围的配置)。

然后再试一次,如果问题仍然存在,那可能是与IE和你的显卡不兼容有关的错误 - 这可以解释为什么这么多人无法复制你的错误(像我一样)。

一些CSS功能会触发硬件加速,这就是为什么它们比js动画更有趣 - 但有些浏览器/ GPU组合有时会滞后或只显示动画的第一步和最后一步。