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就会从该点向下/向后呈现它的自我。因此，您需要确保没有任何子元素具有位置设置，或者如果它们确实存在，您需要在每个子元素上明确设置位置。

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>

它是可以修复的，但需要一些调整！

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选项 - 高级选项卡 - 使用平滑滚动

就像渲染bug一样...... MS IE团队正在调查......

Answer 5

我的情况下的修复是简单地从有位置的元素中删除z-index属性：fixed，IE然后停止奇怪的闪烁。

（禁用IE选项的平滑滚动，同时拥有z-index属性，但这不是解决方案，因为默认情况下用户最有可能启用它。）

Answer 6

只需将body容器定义为relative。

<style>
    body
    {
        position: relative;
    }
</style>

IE 10＆amp; 11用鼠标滚轮滚动时使固定背景跳跃

6 个答案: