IE 10 elements with relative position disappearing after scrolling in parent element

Question

Elements with position: relative, located inside table cells in a big table disappear in Internet Explorer 10 on Windows 7 in a particular case:

1. Scroll down the page
2. Scroll the div#scroller to the right
3. Scroll to top
4. All browsers work as expected, IE10 shows blank table cells

At this point, resizing IE10 window will trigger correct display of cell contents.

Big table, all cells identical:

<td><div>Foo bar</div></td>

CSS:

td div {
  position:relative;
 }

Here's an extremely simplified demo: http://jsfiddle.net/86BaU/

Answer 1

This is a known and reported bug in IE10. However, MS seems unwilling to do anything about it:

https://connect.microsoft.com/IE/feedback/details/817099/ie-10-elements-with-relative-position-disappearing-when-scrolling-in-parent-element-on-windows-7

A hack seems to force IE to use hardware acceleration (or otherwise forcing a redraw by toggling display:none). This worked for me:

-ms-transform: scale(1);
transform: scale(1);

Hope that will work for you!