CSS 使用鼠标滚轮滚动时，IE 10 和 11 使固定背景跳跃
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19377810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE 10 & 11 make fixed backgrounds jump when scrolling with mouse wheel
提问by ropo
When you scroll with the mouse wheel in Windows 8 the fixed background image bounces around like crazy. This only affects IE 10 and IE 11. This affects elements with position:fixedas well.
Here is an example with a fixed background-image:
当您在 Windows 8 中使用鼠标滚轮滚动时，固定的背景图像会像疯了一样四处弹跳。这仅影响 IE 10 和 IE 11。这position:fixed也会影响元素。这是一个带有固定背景图像的示例：
http://www.catcubed.com/test/bg-img-fixed.html
http://www.catcubed.com/test/bg-img-fixed.html
Here is example code:
这是示例代码：
#section{
position: fixed;
top:0;
left:0;
background-color:#eee;
background-position: top left;
background-image: url("images/7.png");
background-size: auto;
background-repeat: no-repeat;
z-index: 10;
}
Is there a solution to keep the background still in IE 10 and 11?
有没有办法让 IE 10 和 11 中的背景保持不变？
回答by Lars
I know it is a bit late for an answer but I've had the same problem and was able to fix it by adding these attributes to my css file
我知道答案有点晚了，但我遇到了同样的问题，并且能够通过将这些属性添加到我的 css 文件中来修复它
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
From the comments:
来自评论：
This solution stops scroll events from firing on the window, so do be careful if you're using anything that relies on such events firing. codepen.io/anon/pen/VawZEV?editors=1111( overflow: hidden, scroll events don't work) codepen.io/anon/pen/PNoYXY?editors=1111( overflow: auto, scroll events fire) - Dan Abrey
此解决方案会阻止滚动事件在窗口上触发，因此如果您使用依赖于此类事件触发的任何内容，请务必小心。codepen.io/anon/pen/VawZEV?editors=1111（溢出：隐藏，滚动事件不起作用）codepen.io/anon/pen/PNoYXY?editors=1111（溢出：自动，滚动事件触发）- Dan Abrey
So this might cause some problems in your projects. But I don't see another way to workaround this bug in IE.
所以这可能会导致你的项目出现一些问题。但我没有看到在 IE 中解决此错误的另一种方法。
回答by uniquelau
This looks like a z-index bug, try adding z-index: 1.
这看起来像一个 z-index 错误，尝试添加 z-index: 1。
Looking into this, I've found the best way to debug is to:
对此，我发现最好的调试方法是：
Create a simple element at the top of the page, e.g.
在页面顶部创建一个简单的元素，例如
<style>#test {position: fixed; background: red; top: 0; left: 0; width: 4em}</style>
<div id="test">Test</div>
In all the above cases, this works correctly, and the scroll is smooth. So this proves it can be done! Now slowly add your properties back in, until you are able to get the element with position fixed to work in the context of your site.
在上述所有情况下，这都能正常工作，并且滚动流畅。所以这证明它可以做到！现在慢慢地添加你的属性，直到你能够让位置固定的元素在你的站点的上下文中工作。
I then found that adding a z-index to the fixed items resolved the issue. (e.g. z-index: 1)
然后我发现向固定项目添加 z-index 解决了这个问题。（例如 z 索引：1）
I also discovered that once a position is set on a child element, the bug presents it's self from that point down/onwards.
我还发现，一旦在子元素上设置了位置，该错误就会从该点向下/向前显示它自己。
So you need to ensure none of the child elements have a position set,or if they do, you explicitly set a position on each child.
因此，您需要确保没有任何子元素设置了位置，或者如果有，则在每个子元素上显式设置位置。
E.g.
例如
<!-- Works -->
<div style="position: fixed;">
<div>Nice</div>
<div>Wicked</div>
<div>Cool</div>
</div>
<!-- Element with position: relative, experiences the bug -->
<div style="position: fixed;">
<div style="position: relative;">sad</div>
<div>sad</div>
<div style="position: fixed;">happy</div>
</div>
It's fixable, but will require some tweaking!
它是可以修复的，但需要一些调整！
回答by arni
Here is a workaround (tested on Windows 8.1):
这是一个解决方法（在 Windows 8.1 上测试过）：
Move the "background" CSS property to the BODY element. Currently it is on the DIV element with id="filler". Here is the resulting CSS:
将“背景”CSS 属性移动到 BODY 元素。目前它位于 id="filler" 的 DIV 元素上。这是生成的 CSS：
body {
font-family: Helvetica, Arial, sans-serif;
background: #fff url(blue-kitty.jpg) no-repeat fixed center 100px;
}
#filler {
text-align: center;
}
.big-margin {
margin-top: 500px;
}
回答by yubi848484
try to turn off smooth scrolling option.
尝试关闭平滑滚动选项。
Internet Options - Advenced Tab - Use Smooth Scrolling
Internet 选项 - 高级选项卡 - 使用平滑滚动
it's like rendering bug.... MS IE team is investigating....
这就像渲染错误.... MS IE 团队正在调查....
回答by netoper
just simply define body container to relative.
只需简单地将主体容器定义为相对。
<style>
body
{
position: relative;
}
</style>
回答by Rafael Lüder
The fix in my case was to simply remove the z-index property from the element that has position:fixed, IE then stopped the strange flickering.
在我的情况下，修复方法是简单地从具有 position:fixed 的元素中删除 z-index 属性，然后 IE 停止了奇怪的闪烁。
(disabling smooth scrolling on IE options worked while having he z-index property but that's not a solution since users would most likely have it on by default).
（禁用 IE 选项的平滑滚动在拥有 z-index 属性时有效，但这不是解决方案，因为用户很可能默认启用它）。
