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

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?

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

Solution 2:

This looks like a z-index bug, try adding z-index: 1.

Looking into this, I've found the best way to debug is to:

Create a simple element at the top of the page, e.g.

 <style>#test {position: fixed; background: red; top: 0; left: 0; width: 4em}</style>
 <div id="test">Test</div>

In all the above cases, this works correctly, and the scroll is smooth. So this proves it can be done! Now slowly add your properties back in, until you are able to get the element with position fixed to work in the context of your site.

I then found that adding a z-index to the fixed items resolved the issue. (e.g. z-index: 1)

I also discovered that once a position is set on a child element, the bug presents it's self from that point down/onwards.

So you need to ensure none of the child elements have a position set, or if they do, you explicitly set a position on each child.

E.g.

<!-- Works -->
<div style="position: fixed;">
    <div>Nice</div>
    <div>Wicked</div>
    <div>Cool</div>
</div>

<!-- Element with position: relative, experiences the bug -->
<div style="position: fixed;">
    <div style="position: relative;">sad</div>
    <div>sad</div>
    <div style="position: fixed;">happy</div>
</div>

It's fixable, but will require some tweaking!