IE10 中奇怪的翻译+溢出错误答案

【问题标题】：Curious translate+overflow bug in IE10IE10 中奇怪的翻译+溢出错误
【发布时间】：2013-09-08 22:44:49
【问题描述】：

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

这个div（纯文本）的内容直到转换结束才会呈现，即div 似乎是空的。

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

此行为在此处复制：http://jsbin.com/inUsayU/5/ （这个 jsBin 链接只能在 IE10 中使用）

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

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

【问题讨论】：

1) “fiddle”表示您使用过jsfiddle.net 2) 您指的是第二个链接，但在您的jsbin 演示中只有一个链接。 3) 当我将链接悬停在 Windows 7 IE10 中时，div 会滑过屏幕并且不会显示为空。
1/ 不在乎。 2 / oups，没有链接好小提琴。 3/ 你应该。在编辑模式下使用分屏+用JS按钮运行，这个bug就更明显了。不系统，多试几次。
我在 Windows 7 - IE10 上仍然没有看到问题。这两个链接对我来说都是一样的。
我将启动 VM 以检查 W7。我在表面（专业版和 RT）和 W8 桌面上都有这个错误。
好吧，先生，您说的完全正确：IE10/W7 上不会出现这个错误。

标签： internet-explorer css transform

【解决方案1】：

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

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

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

【讨论】：

我仍然在 W8.1 / IE11 中看到问题。您是否单击“编辑 jsbin”，然后每次都单击“使用 js 运行”以刷新错误？ IE11也更好，所以这个bug更难捕捉。你必须知道它就在这里。（也在 VM 和 Surface 中看到过，所以不是我的机器特有的。）
@mddw 我在 IE11 中没有看到它。每次运行演示时，您是否始终如一地看到它？
是的，每次我用“用 js 运行”重新启动它。但是很难抓住 IE11 + 一个好的装备，一旦 div 在视口中翻译，重绘就会发生。它在表面上更慢且更明显。
@mddw 我有一个可以测试的表面；我认为您使用的是 SurfaceRT，因为 Pro 相当强大。

【解决方案2】：

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

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

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

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

【讨论】：

我在 Surface 平板上也遇到过这个问题，所以不是硬件问题。