8

在 IE10（Windows 8 和仅 Windows 8，包括 RT）中，我有div一个overflow : auto从屏幕外部动画的（CSS3 transition+ transform）

this 的内容div（纯文本）直到转换结束时才会呈现，即div看起来是空的。

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

此行为在此处重现： http: //jsbin.com/inUsayU/5/ （此 jsBin 链接仅适用于 IE10）

保持屏幕分割（如果没有分割，添加 CSS 和 HTML 窗格），悬停第一个链接，您应该会看到div过渡为空。尝试悬停第二个链接，另一个div过渡很好。您可能每次都必须使用“使用 JS 运行”重新启动，因为通常（并非总是）问题只发生一次。

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

4

2 回答 2

1

我在 Windows 8.1 上的 Internet Explorer 11 中进行了测试。我还启用了 IE10 Emulation 进行了测试。此外，我在 Windows Phone 上的 IE10 中进行了测试。这是对已经在 Windows 7 上进行的 IE10 测试的补充。在所有情况下，我都没有看到您报告的问题。我怀疑除了浏览器的错误之外还有其他问题。

关于您的实现，我建议避免-ms-transition前缀属性被认为是实验性的。Internet Explorer 10 支持无前缀转换属性。

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

于 2013-11-03T19:27:19.897 回答
0

我无法复制您的错误，但我猜测可能是什么原因造成的。

尝试在 IE10/11 中禁用硬件加速（在 Internet 选项 > 高级下，应该类似于 Accelerated graphics > Disabling GPU and using software rendering - 我的窗口是葡萄牙语，所以我没有确切的位置），重新启动 Windows（它可能是系统范围的配置）。

然后再试一次，如果问题仍然存在，则可能是与 IE 和您的显卡不兼容有关的错误 - 这可以解释为什么这么多人无法复制您的错误（比如我）。

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

于 2014-01-30T12:10:03.330 回答