为啥在 IE 上滚动时固定的背景图像会移动？
Posted
技术标签:
【中文标题】为啥在 IE 上滚动时固定的背景图像会移动？【英文标题】：Why does a fixed background-image move when scrolling on IE?为什么在 IE 上滚动时固定的背景图像会移动？ 【发布时间】：2015-03-14 00:59:16 【问题描述】：我正在尝试修复background-image。
正如您在my blog 中看到的，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;
【问题讨论】：
【参考方案1】：这是 Internet Explorer 中固定背景图像的已知错误。我们最近做了一些工作来改善这种行为，并为我们在 Windows 10 上的 Internet Explorer 预览版发布了更新。您可以在 Mac OS X 或 Windows 上通过http://remote.modern.ie 测试这些更改。
以下是之前和之后的 IE 11 和 IE Remote Preview。请注意，使用鼠标滚轮滚动不会再像在 Internet Explorer 11 中那样导致固定背景图像跳跃（或抖动）。
【讨论】：
@the1900 当您为 body 元素设置背景附件时，此错误不存在。 @Jonathan Sampson 您打算什么时候发布修复此错误的更新？什么版本的 IE & windows 受到影响？例如，我尝试过使用 win7 + IE11 并且不存在错误。另一方面 IE11 + win8.1 有这个错误。这与 windows 和/或 IE 版本有关还是其他因素很重要？ @TamásBolvári Windows 10 上的 Internet Explorer 11 没有完成（如果有的话）功能工作。 IE 11 中 Web 平台的任何错误都可能在 IE 11 中永久存在。请在 Edge 中进行测试，并报告您在那里遇到的任何问题。 只是指出这个错误仍然存在于 Edge 版本 38.14393.0.0 中。 截至 2017 年 8 月，此错误仍然存在于 Windows 10 + IE11（即微软最广泛采用的操作系统版本和最流行的浏览器版本）上。看到他们在 2.5 年前完成了针对其他操作系统目标的修复，很高兴知道他们为什么拒绝将其推广到人们实际使用的平台组合......：\【参考方案2】：我试图禁用您网站上的一些 css 规则，当我删除 html 标记的背景属性 (background:#fff;) 时，页面会平滑滚动。请尝试一下，看看它是否适合您。
更新：
我也找到了解决方法here：
$('body').on("mousewheel", function ()
event.preventDefault();
var wheelDelta = event.wheelDelta;
var currentScrollPosition = window.pageYOffset;
window.scrollTo(0, currentScrollPosition - wheelDelta);
);
【讨论】：
这确实解决了我在 Win8 - IE11 上的问题 这适用于鼠标滚轮，但如果您使用触控板、向上/向下键或屏幕（触摸/滑动）滚动，错误仍然存在。【参考方案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
);
【讨论】：
这适用于我的滚轮和箭头键。我没有要测试的触控板。不过，在击键时，我将 preventDefault 移到了案例中。否则，所有其他击键都会被阻止，因此您无法在表单中输入文本。 请注意，使用此实现会带走浏览器本机应用于滚动“块”的动画，因此最终结果是更“断断续续”的滚动体验。但是您可以在此实现中添加动画，以尝试恢复平滑滚动的感觉。也许是这样的：***.com/a/26798337/718325【参考方案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
);
【讨论】：
【参考方案5】：我的最终解决方案是基于我找到的所有答案：
在 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]-->
【讨论】：
我使用了@supports (-ms-ime-align:auto) ，它适用于边缘 42.17134.1.0【参考方案6】：
瞄准 IE 并改用滚动似乎可以解决问题。
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
.className
background-attachment: scroll;
【讨论】：
这不适用于最新版本的 Edge，它也存在这个问题。 值scroll 与cover 的效果不同。所以这并不能解决问题。【参考方案7】：
我刚刚遇到一个案例，我可以通过从与固定背景重叠的元素中删除 box-shadow 来减少口吃。
【讨论】：
【参考方案8】：使用此脚本：https://***.com/a/34073019/7958220
为了检测边缘浏览器，我更改了 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%";
【讨论】：
【参考方案9】：我尝试了 twojr 的 CSS 解决方案，但它在 Edge/15.15063 中不起作用。 Dasha 的回答解决了 Edge 但不是 IE 11 中的问题。我注意到 document.documentMode 条件不完整。 document.documentmode 将为所有浏览器返回 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-
【讨论】：
【参考方案10】：对于最新的边缘版本，请使用这个，因为 twicejr 之前的回答不再有效：
/*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%;
【讨论】：
这很好用！但是我有一个粘性菜单，向下滚动时会固定在顶部。应用此 hack 后，IE 中的菜单不再具有粘性（菜单向上滚动且不会固定在顶部）。在不丢失粘性菜单的情况下如何解决 IE 中的问题？【参考方案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 上滚动时固定的背景图像会移动？的主要内容，如果未能解决你的问题，请参考以下文章