Fixed element disappearing in Internet Explorer 9

Question

I have a web page built in ASP.NET MVC that uses fixed positioning to allow users to always see the row headers when scrolling.

When using Internet Explorer 9 the fixed elements disappear and reappear from view when scrolling. I have tested in Chrome and it works correctly there. I have also made sure that IE is using standards mode and not quirks.

This jsfiddle demonstrates my problems: http://jsfiddle.net/zache/43zCf/

 Doesn't fit the character limit.

Answer 1

The parents of the z-indexed elements are not positionned. You have to add to table position: inherit; so the css for table will be :

table {
    position: inherit;
    white-space: nowrap;
    border-collapse: collapse;
}

Answer 2

This worked for me.

Solution 1:

Add scrollbars on page load then remove them a short time after.

Sys.Application.add_load(function(){
if ($.browser.version == 9 && $.browser.msie) {
    $('html').css('overflow-y','scroll');

    setTimeout(function () {
        $('html').css('overflow-y','auto');
    }, 10);
}

})();

Solution 2

Set document mode to ie8 in web.config:

<add name="X-UA-Compatible" value="IE=8"/>

Answer 3

I was having the same issue, I was able to fix it by adding the following transform code to the fixed position element, ( transform: translateZ(0);-webkit-transform: translateZ(0); ) that forces the browser to use hardware acceleration to access the device's graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.

Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).

Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.

#element {
    position: fixed;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}