当使用鼠标滚轮滚动时,IE 10和11使固定背景跳跃

Question

在Windows 8中使用鼠标滚轮滚动时,固定的背景图像会像疯了一样反弹.这仅影响IE 10和IE 11.这position:fixed也会影响元素.在IE 10和11中有没有阻止它发生？

这是一个固定背景图像的示例:

http://www.catcubed.com/test/bg-img-fixed.html

Answer 1

我知道答案有点晚了但是我遇到了同样的问题并且能够通过将这些属性添加到我的css文件来修复它

html{
    overflow: hidden;
    height: 100%;    
}
body{
    overflow: auto;
    height: 100%;
}

来自评论:

此解决方案会阻止滚动事件在窗口上触发,因此如果您正在使用依赖此类事件触发的任何内容,请务必小心.codepen.io/anon/pen/VawZEV?editors=1111(溢出:隐藏,滚动事件不起作用)codepen.io/anon/pen/PNoYXY?editors=1111(溢出:自动,滚动事件火灾) - Dan Abrey

因此,这可能会导致您的项目出现问题.但我没有看到在IE中解决此错误的另一种方法.

Answer 2

这看起来像一个z-index错误,尝试添加z-index:1.

看看这个,我发现最好的调试方法是:

在页面顶部创建一个简单的元素,例如

 <style>#test {position: fixed; background: red; top: 0; left: 0; width: 4em}</style>
 <div id="test">Test</div>

在上述所有情况下,这都可以正常工作,并且滚动顺畅.所以这证明它可以做到!现在慢慢地重新添加您的属性,直到您能够获得位置固定的元素在您的站点上下文中工作.

然后我发现在固定项目中添加z-index解决了这个问题.(例如z-index:1)

我还发现,一旦在子元素上设置了一个位置,该bug就会从该点向下/向前呈现它的自我.因此,您需要确保没有任何子元素具有位置设置,或者如果它们确实存在,则您需要在每个子元素上明确设置位置.

例如

<!-- 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>

这是可以修复的,但需要一些调整!

Answer 3

这是一种解决方法(在Windows 8.1上测试):

将"background"CSS属性移动到BODY元素.目前它在ID为"填充"的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;
    }

Answer 4

尝试关闭平滑滚动选项。

Internet 选项 - 高级选项卡 - 使用平滑滚动

这就像渲染错误......MS IE 团队正在调查......