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

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

Here is a way to handle PageUP and PageDOWN keyS based on the previous answers :

if(navigator.userAgent.match(/Trident\/7\./)) { // if IE
    $('body').on("mousewheel", function () {
        // remove default behavior
        event.preventDefault(); 

        //scroll without smoothing
        var wheelDelta = event.wheelDelta;
        var currentScrollPosition = window.pageYOffset;
        window.scrollTo(0, currentScrollPosition - wheelDelta);
    });
    $('body').keydown(function (e) {
        var currentScrollPosition = window.pageYOffset;

        switch (e.which) {
            case 33: // page up
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition - 600);
                break;
            case 34: // page down
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition + 600);
                break;
            case 38: // up
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition - 120);
                break;
            case 40: // down
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition + 120);
                break;
            default: return; // exit this handler for other keys
        } 
    });

}

Answer 3

This seems to be working on trackpads for me. It builds on radarek's workaround.

    if(navigator.userAgent.match(/Trident\/7\./)) {
    $('body').on("mousewheel", function () {
        event.preventDefault();

        var wheelDelta = event.wheelDelta;

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

    $('body').keydown(function (e) {
        e.preventDefault(); // prevent the default action (scroll / move caret)
        var currentScrollPosition = window.pageYOffset;

        switch (e.which) {

            case 38: // up
                window.scrollTo(0, currentScrollPosition - 120);
                break;

            case 40: // down
                window.scrollTo(0, currentScrollPosition + 120);
                break;

            default: return; // exit this handler for other keys
        } 
    });
}

Answer 4

The previous answer fixed my issue in IE11! However, I had to make a small change so it will also let me refresh the page using F5 (or Ctrl+F5):

//In IE 11 this fixes the issue when scrolling over a photo break without using the scroll bar

 if(navigator.userAgent.match(/Trident\/7\./)) {
    $('body').on("mousewheel", function () {
        event.preventDefault();

        var wheelDelta = event.wheelDelta;

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

    $('body').keydown(function (e) {

        var currentScrollPosition = window.pageYOffset;

        switch (e.which) {

            case 38: // up
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition - 120);
                break;

            case 40: // down
                e.preventDefault(); // prevent the default action (scroll / move caret)
                window.scrollTo(0, currentScrollPosition + 120);
                break;

            default: return; // exit this handler for other keys
        } 
    });
}

Answer 5

For latest edge release use this, as prior answer by twicejr no longer works:

/*Edge - works to 41.16299.402.0*/
@supports (-ms-ime-align:auto) 
{
    html{
        overflow: hidden;
        height: 100%;       
    }
    body{
        overflow: auto;
        height: 100%;
        position: relative;
    }
}

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

Answer 6

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.