css - IE 10 & 11 make fixed backgrounds jump when scrolling with mouse wheel

Question

When you scroll with the mouse wheel in Windows 8 the fixed background image bounces around like crazy. This only affects IE 10 and IE 11. This affects elements with position:fixed as well. Here is an example with a fixed background-image:

http://www.catcubed.com/test/bg-img-fixed.html

Here is example code:

#section{
    position: fixed;
    top:0;
    left:0;
    background-color:#eee;
    background-position: top left;
    background-image: url("images/7.png");
    background-size: auto; 
    background-repeat: no-repeat;
    z-index: 10;
}

Is there a solution to keep the background still in IE 10 and 11?

Answer 1

I know it is a bit late for an answer but I've had the same problem and was able to fix it by adding these attributes to my css file

html{
    overflow: hidden;
    height: 100%;    
}
body{
    overflow: auto;
    height: 100%;
}

From the comments:

This solution stops scroll events from firing on the window, so do be careful if you're using anything that relies on such events firing. codepen.io/anon/pen/VawZEV?editors=1111 ( overflow: hidden, scroll events don't work) codepen.io/anon/pen/PNoYXY?editors=1111 ( overflow: auto, scroll events fire) - Dan Abrey

So this might cause some problems in your projects. But I don't see another way to workaround this bug in IE.