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

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.

I have tried to disable some of css rules on your site and when I remove background property (background:#fff;) for html tag then page is scrolling smoothly. Please, try it and tell if it works for you.

Update:

I have also found workaround here:

$('body').on("mousewheel", function () {
  event.preventDefault();

  var wheelDelta = event.wheelDelta;

  var currentScrollPosition = window.pageYOffset;
  window.scrollTo(0, currentScrollPosition - wheelDelta);
});

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]-->