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!

Answer 2

Is it actually the position:relative that causes it to disappear? What happens when you change

position:relative

back to

position: static

As a side-thought, it might be a low memory issue when you said re-sizing IE 10 window will trigger correct display of cell contents. You might try restarting your computer or viewing it in IE 10 on someone else's computer.

Answer 3

We had similar issue in our project, frontend team solved this with:

opacity: 0.99;

So simple, check this out!

http://jsfiddle.net/86BaU/106/