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

Question

我正在尝试 background-image 修复。

如您在 my blog 中所见，在 IE 11 上滚动时 background-image 正在移动。

我该如何解决这个问题？

这是我的 CSS:

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

Answer 1

这是 Internet Explorer 中固定背景图像的已知错误。我们最近做了一些工作来改进此行为，并在 Windows 10 上发布了对 Internet Explorer 预览版的更新。您今天可以从 Mac OS X 或 [=19 测试更改=] 在 http://remote.modern.ie.

以下是 IE 11 和 IE Remote Preview 前后对比。请注意如何使用 mouse-wheel 滚动不再导致固定背景图像跳动（或抖动），就像在 Internet Explorer 11 中那样。

Answer 2

我试图在您的网站上禁用一些 css 规则，当我删除 html 标签的背景属性（背景：#fff;）时，页面滚动流畅.请尝试一下，看看它是否适合你。

更新：

我也找到了解决方法 here:

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

  var wheelDelta = event.wheelDelta;

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

Answer 3

这似乎适用于我的触控板。它建立在 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
        } 
    });
}

Answer 4

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

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

Answer 5

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

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

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

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

Answer 6

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

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

Answer 7

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

Answer 8

使用这个脚本：

为了检测边缘浏览器，我更改了 html 和正文的样式。

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 9

我尝试了两次 jr 的 CSS 解决方案，但它在 Edge/15.15063 中不起作用。 Dasha 的回答解决了 Edge 但不是 IE 11 中的问题。我注意到 document.documentMode 条件不完整。对于所有浏览器，document.documentmode 将 return undefined，IE 8+ 除外，它将 return the 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. 这也适用于箭头键和触控板滚动。我没有考虑IE7-

Answer 10

对于最新的 edge 版本使用这个，因为之前的回答不再有效：

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

根据之前的回答，这里有一个处理 PageUP 和 PageDOWN 键的方法：

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

}

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

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

css

internet-explorer

background-image

internet-explorer-11