Curious translate+overflow bug in IE10

Question

In IE10 (Windows 8 and only Windows 8, including RT), I have this div with a overflow : auto which is animated from outside the screen (CSS3 transition + transform)

The content of this div (plain text) is not rendered until the end of the transition, ie the div seems empty.

If I set overflow : hidden, the problem disappear.

This behavior is reproduced here : http://jsbin.com/inUsayU/5/ (this jsBin link will only work in IE10)

Keep the screen splitted (if not splitted, add a CSS and a HTML pane), hover the first link, you should see the div transitionning empty. Try hovering the second link, the other div transition fine. You may have to restart with "Run with JS" each time, because often (not always) the problem is only happening once.

On my project, I hacked an ugly solution with UA Sniffing and switching the overflow state before and after the transition, but I hope there's a simpler explanation/solution you can provide.

Answer 1

I tested in this Internet Explorer 11 on Windows 8.1. I also tested with IE10 Emulation enabled. Further, I tested in IE10 on Windows Phone. This is in addition to the IE10 tests conducted on Windows 7 already. In all cases, I did not see the issue you reported. I suspect there was something else to this other than a bug with the browser.

With regards to your implementation, I would suggest avoiding -ms-transition as prefixed properties are considered to be experimental. Internet Explorer 10 supports the unprefixed transition property.

I'm currently downloading an IE10 Virtual Machine from http://modern.ie. Once I have it stood up I'll test this again and report back with an update.