Why does a fixed background-image move when scrolling on IE?

Question

I'm trying to make background-image fixed.

As you see in my blog, the background-image is moving when scrolling on IE 11.

How can I fix this?

This is my CSS:

background-image: url("./images/cover.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

Answer 1

My final fix is based on all the answers I've found:

On the main css for Edge / ie11 / ie10

/*Edge*/
@supports ( -ms-accelerator:true ) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}
/*Ie 10/11*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
{
    html{
        overflow: hidden;
        height: 100%;    
    }
    body{
        overflow: auto;
        height: 100%;
    }
}

For ie9, ie8 and ie7 I've added the code (without media query) in a separate hacksheet:

<!--[if lte IE 9]>
    <style type=text/css>
       html{
           overflow: hidden;
           height: 100%;    
       }
       body{
           overflow: auto;
           height: 100%;
       }
    </style>
<![endif]-->

Answer 2

This is a known bug with fixed background images in Internet Explorer. We recently did some work to improve this behavior and have shipped updates to our preview build of Internet Explorer on Windows 10. You can test the changes today from Mac OS X or Windows on http://remote.modern.ie.

Below is the before and after, IE 11 and IE Remote Preview. Notice how scrolling with the mouse-wheel no longer causes the fixed background image to jump (or jitter) as it did in Internet Explorer 11.