CSS 为什么在 IE 上滚动时固定的背景图像会移动？

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

提问by the1900

I'm trying to make background-imagefixed.

我正在努力background-image修复。

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

正如你在看我的博客，则background-image是在IE 11滚动时移动。

How can I fix this?

我怎样才能解决这个问题？

This is my CSS:

这是我的 CSS：

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

采纳答案by Sampson

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.

这是 Internet Explorer 中修复背景图像的已知错误。我们最近做了一些工作来改进这种行为，并且已经为我们在 Windows 10 上的 Internet Explorer 预览版本提供了更新。您今天可以在http://remote.modern.ie上从 Mac OS X 或 Windows 测试这些更改。

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.

下面是之前和之后，IE 11 和 IE 远程预览。请注意使用鼠标滚轮滚动不再像 Internet Explorer 11 那样导致固定的背景图像跳跃（或抖动）。

回答by twicejr

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

我的最终修复基于我找到的所有答案：

On the main css for Edge / ie11 / ie10

关于 Edge / ie11 / ie10 的主要 css

/*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:

对于 ie9、ie8 和 ie7，我在单独的 hacksheet 中添加了代码（没有媒体查询）：

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

回答by radarek

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.

我试图禁用您网站上的一些 css 规则，当我删除 html 标记的背景属性 (background:#fff;) 时，页面正在平滑滚动。请尝试一下，看看它是否适合你。

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

回答by Darren Alfonso

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

这似乎适用于我的触控板。它建立在radarek 的解决方法之上。

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

回答by Peter O Brien

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

对于最新的边缘版本，请使用它，因为之前的回答来自twojr不再有效：

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

回答by John Churchley

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

以 IE 为目标并改用滚动似乎可以解决此问题。

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

回答by Rudey

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

我刚刚遇到一个案例，我能够通过box-shadow从与固定背景重叠的元素中删除来减少口吃。

回答by Dasha

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

使用这个脚本：https: //stackoverflow.com/a/34073019/7958220

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

为了检测边缘浏览器，我更改了 html 和 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%"; 

}

}

回答by Iain Wilson

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.documentModecondition was not complete. document.documentmode will return undefinedfor 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.

我尝试了 twojr 的 CSS 解决方案，但它在 Edge/15.15063 中不起作用。Dasha 的回答解决了 Edge 中的问题，但没有解决 IE 11 中的问题。我注意到document.documentMode条件不完整。document.documentmode 将返回undefined除 IE 8+ 之外的所有浏览器，IE 8+ 将返回 mode number。有了这个，以下代码将检测 IE 8+ 和 Edge 并解决背景图像问题。

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-

上面代码的JS小提琴。这也适用于箭头键和触控板滚动。我没有考虑过IE7-

回答by Iain Wilson

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):

上一个答案解决了我在 IE11 中的问题！但是，我必须做一个小改动，这样我也可以使用 F5（或 Ctrl+F5）刷新页面：

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

//在 IE 11 中，这解决了在不使用滚动条的情况下滚动照片中断时的问题

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