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

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.

Answer 2

Using this script: https://stackoverflow.com/a/34073019/7958220

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

}

Answer 3

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

Answer 4

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

Answer 5

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-