在父元素中滚动后，具有相对位置的IE 10元素消失 [英] IE 10 elements with relative position disappearing after scrolling in parent element

问题描述

具有 position：relative 的元素在Windows 7上的Internet Explorer 10中消失：

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. 向下滚动页面


2. 向右滚动 div＃scroller


3. 滚动到顶部


4. 所有浏览器均按预期运行，IE10显示空白表格单元格

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

点，调整IE10窗口的大小将触发单元格内容的正确显示。

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;
 }

这是一个极其简化的演示： http://jsfiddle.net/86BaU/

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

推荐答案

这是IE10中一个已知且已报告的错误。但是，MS似乎不愿意对此做任何事情：

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-当在Windows 7上的父元素中滚动时，带有相对位置的元素消失了

黑客似乎迫使IE使用硬件加速（或者通过切换 display：none 来强制重绘）。这对我有用：

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);

希望对您有用！

这篇关于在父元素中滚动后，具有相对位置的IE 10元素消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！