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

Question

我正在努力background-image修复.

正如您在我的博客中看到的那样,background-image在IE 11上滚动时正在移动.

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

这是我的CSS:

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

Answer 1

我的最终修复是基于我发现的所有答案:

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

对于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 2

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

下面是IE 11和IE Remote Preview之前和之后的内容.请注意,使用鼠标滚轮滚动不再导致固定背景图像像在Internet Explorer 11中那样跳转(或抖动).

Answer 3

我试图在你的网站上禁用一些css规则,当我删除html标签的背景属性(背景:#fff;)时,页面滚动顺畅.请试一试,告诉它是否适合您.

更新:

我也在这里找到了解决方法:

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

  var wheelDelta = event.wheelDelta;

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