How to solve IE9 scrolling repaint issue with fixed-position parent that has -ms-transform:translate?

Question

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>

Answer 1

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