如何解决具有-ms-transform：translate的固定位置父级的IE9滚动重绘问题？答案

【问题标题】：How to solve IE9 scrolling repaint issue with fixed-position parent that has -ms-transform:translate?如何解决具有-ms-transform：translate的固定位置父级的IE9滚动重绘问题？
【发布时间】：2014-01-17 20:04:46
【问题描述】：

我有一个父 div 有 -ms-transform: translateX(50%) translateY(40%);位置：固定；

我的内部子 div 具有固定高度和溢出：自动

在 IE9（仅真正的 IE9）中，这会导致奇怪的滚动问题（无法正确重绘）。

任何人都面临这个问题，知道任何修复或解决方法吗？

下面是演示这个问题的代码：

<div style="-ms-transform: translateX(50%) translateY(40%); position: fixed;">
    <div style="height: 300px; width: 300px; overflow-x: hidden; overflow-y: auto;">
        foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo 
    </div>
</div>

【问题讨论】：

仍然没有找到任何解决方法。现在我只是避免 -ms-transform。
我遇到了同样的问题。你找到解决方案了吗？
@scooterlord - 不，我最终删除了 -ms-transform。

标签： html css internet-explorer

【解决方案1】：

有点晚了，但是嘿，这对我有用，也适用于其他来这里的人。我用“-ms-filter”替换了我的“-ms-transform”

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";

【讨论】：

难以置信，这行得通。非常感谢你让我头疼不已

【解决方案2】：

尝试使用溢出属性 - 将溢出属性设置为滚动。即overflow-y:scroll，看看是否能解决问题。

【讨论】：