如何解决IE9滚动重绘问题与固定位置父，有-ms-transform：translate？ [英] How to solve IE9 scrolling repaint issue with fixed-position parent that has -ms-transform:translate?

问题描述

我有一个父div，它有-ms-transform：translateX（50％）translateY（40％）; position：fixed;

在IE9中，只有真正的IE9），这导致奇怪的滚动问题（它不会正确重绘）。

任何人面对这个问题，知道任何修正或解决方法吗？

以下是演示此问题的代码：

 < DIV的风格= -  MS-变换：translateX（50％）translateY（40％）;位置：固定;> 
< 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 
< / div> 
< / div> 
  

解决方案

一个有点晚了，但嘿，这为我工作可以为任何人来这里工作。我用-ms-filter取代了我的-ms-transform

  -ms-filter：progid：DXImageTransform。 Microsoft.Matrix（M11 = 1，M12 = 0，M21 = 0，M22 = 1，SizingMethod ='auto expand'）; 
  

I have a parent div that has -ms-transform: translateX(50%) translateY(40%); position: fixed;

My inner child div has fixed-height and overflow: auto

In IE9 (only real IE9), this causes weird scrolling issues (it doesnt repaint properly).

Anyone face this, know any fixes or workaround?

Here's code to demonstrate this issue:

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

解决方案

A bit late but hey, this worked for me and could work for anyone else coming here. I replaced my "-ms-transform" with "-ms-filter"

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

这篇关于如何解决IE9滚动重绘问题与固定位置父，有-ms-transform：translate？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！