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;

Pernambuco

Answer 1

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.

Endlong

thank you for answer but see [thisblog[(est0que.tistory.com/category) as you can see it does not move when scroll even browser is IE. I copied his code and adjust it. my blog still scrolling... – Pernambuco

@Pernambuco this bug is not present when you set background-attachment for body element. – Snuffbox

@Jonathan Sampson when do you plan to release update with fix for this bug? What version of IE & windows are affected? I have tried for example with win7 + IE11 and bug is not present. On the other hand IE11 + win8.1 has this bug. Is this related to windows and/or IE version or maybe other factors are important? – Snuffbox

@Jonathon Sampson I had to use the workaround here connect.microsoft.com/IE/feedback/details/819518/…. I have a Win8.1 laptop with touch screen and still had the issue (Acer Aspire S7-392) – Gospodin

Doesn't work on Windows 10 + IE 11. @Endlong when do you plan to release update with fix for this bug? – Irregularity

@TamásBolvári Internet Explorer 11 on Windows 10 isn't getting (much, if any) feature work done. Any bugs with the web platform in IE 11 are likely to stick around for good in IE 11. Please test in Edge, and report any issues you encounter there. – Endlong

unrelated? but helpful for devising a workaround: #29649424 – Invention

It's nice to know, but us web developers still have to deal with old, non-upgraded installations (many people don't even know what Edge is) – Erich

@Erich I understand; but all signs indicate users of Internet Explorer are constantly moving up to newer versions; this is increasingly becoming the case in corporate environments as well. The future is bright :) If you run into any issues with IE, I'm happy to assist in identifying work-arounds. – Endlong

Just pointing out this bug still exists in Edge version 38.14393.0.0. – Acuity

As of August 2017, this bug is still present on Windows 10 + IE11 (i.e., Microsoft's most widely adopted OS version and most popular browser version). Seeing as they had a fix complete for other OS targets 2.5 years ago, it would be nice to know why they're refusing to roll it out to a platform combination that people actually use... :\ – Haith

Answer 2

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

Erich

I used @supports (-ms-ime-align:auto) which works on edge 42.17134.1.0 – Kwapong

Answer 3

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);
});

Snuffbox

This did fix the problem for me on Win8 - IE11 – Aitch

This works for the mousewheel, but if you use your trackpad, up/down keys or screen (touch/swipe) to scroll the bug is still there. – Gospodin

Answer 4

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
        } 
    });
}

Lode

This is working for me with scroll wheel and arrow keys. I don't have a trackpad to test with. On the keystrokes, though, I moved the preventDefault into the cases. Otherwise, all other keystrokes are blocked which makes it so you can't enter text into forms. – Romansh

Note that using this implementation takes away the animation that the browser natively applies to the scroll "chunks", so the end result is a more "choppy" scroll experience. But you can add animation to this implementation to try to get that smooth scroll feel back. Perhaps something like this: https://mcmap.net/q/668942/-scrollto-with-animation – Seraphine

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%;
    }
}

Baleen

This works fine! But I have a sticky menu that gets fixed on top when scrolling down. When this hack is applied the menu is not sticky anymore in IE (menu scrolls up and does not get fixed on top). What can I do to solve the problem in IE without loosing my sticky menue? – Renayrenckens

Answer 6

Target IE and using scroll instead appears to fix the issue.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .className {
        background-attachment: scroll;
    }
}

Douala

This does not work for the latest version of Edge, which also exhibits this problem. – Tierell

The value scroll has not the same effect as cover. So this isn't fixing the problem. – Ticking

Answer 7

I just came across a case where I was able to reduce the stuttering by removing box-shadow from elements that overlap the fixed background.

Tierell

Answer 8

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
        } 
    });
}

Altar

Answer 9

Using this script: https://mcmap.net/q/128527/-how-to-target-edge-browser-with-javascript

To detect the edge browser, I then changed the style for html and body.

if (document.documentMode || /Edge/.test(navigator.userAgent)) {
   document.documentElement.style.overflow = "hidden";
   document.documentElement.style.height = "100%";
   document.body.style.overflow = "auto";
   document.body.style.height = "100%"; 

}

Gobang

Answer 10

I tried twicejr's CSS solution but it is not working in Edge/15.15063. Dasha's answer solved the problem in Edge but not IE 11. I noticed that the document.documentMode condition was not complete. document.documentmode will return undefined for all browsers except for IE 8+ which will return the mode number. With that, the following code will detect both IE 8+ and Edge and solve the background image problem.

if ((document.documentMode != undefined) || (/Edge/.test(navigator.userAgent))) {
document.documentElement.style.overflow = "hidden";
document.documentElement.style.height = "100%";
document.body.style.overflow = "auto";
document.body.style.height = "100%";}

JS Fiddle for the above code. This also works with arrow key and track-pad scrolling. I didn't give any consideration to IE7-

Clarethaclaretta

Answer 11

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
        } 
    });

}

Jonajonah