IE 10 elements with relative position disappearing

问题:

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/

回答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!

回答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.

回答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/