Question

IE11中的奇怪问题，当使用鼠标滚轮或光标键时，以下项目的固定背景会闪烁。肯定是这是一个错误。

网站：http://gerbrandy.zitemedia.nl:88/

我使用脚本来调整背景比例，但这不是问题，因为滚动时resize事件不会触发，所以这不是脚本的问题。它与固定定位元素有关。在所有其他浏览器中，此脚本可以使用几年。

我不知道如何解决这个问题。尝试了几件事，但不知道如何禁用javascript例如但不应该是这种情况。我在Windows 8.1上使用IE11。

有人对此有相同的经验吗？你知道如何解决这个问题吗？

Answer 1

滚动时，有三件事可能导致IE 11闪烁/波动/延迟固定位置元素：

如果您有“溢出：自动;”在父容器元素上，将其删除。
删除背景附件：已修复;来自固定位置元素。
从固定位置元素移除border-radius（仅限移动IE）。

Answer 2

我遇到了同样的问题，这似乎是一个错误，当你的计算机规格要处理的页面内部有太多的事情发生时，我能够通过将以下转换代码添加到修复程序来修复它position元素，（transform: translateZ(0);-webkit-transform: translateZ(0);）强制浏览器使用硬件加速来访问设备的图形处理单元（GPU）以使像素飞起。另一方面，Web应用程序在浏览器的上下文中运行，这使得软件可以完成大部分（如果不是全部）渲染，从而减少了转换的马力。但是Web一直在追赶，大多数浏览器厂商现在通过特定的CSS规则提供图形硬件加速。

使用-webkit-transform：translate3d（0,0,0）;将使GPU转换为CSS转换的动作，使它们更平滑（更高的FPS）。

注意： translate3d（0,0,0）在您看到的内容方面没有任何效果。它在x，y和z轴上移动对象0px。它只是一种强制硬件加速的技术。

 #element {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 9994;
...other stuff and then
        /* MAGIC HAPPENS HERE */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

Answer 3

显然是＆＃34; bug＆＃34;仅影响Windows 8.1上的IE11，或者也可能影响8.0。删除background-attachmend:fixed为我工作。显然该规则是多余的，因为背景图像在没有该规则的每个浏览器中正确显示。第二种解决方案是在IE设置中禁用平滑滚动，但这不是最佳的，因为它在默认安装中已启用。

闪烁的CSS：

#element_id{
    position:fixed;
    height:100%;
    left:0;
    bottom:0;
    right:0;
    background-image:url('path/to/jpg');
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    background-attachment:fixed;
}

...和新代码（删除1行）：

#element_id{
    position:fixed;
    height:100%;
    left:0;
    bottom:0;
    right:0;
    background-image:url('path/to/jpg');
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
}

Answer 4

以下硬件加速技术导致了我的。

outline: 1px solid transparent;

删除它可能是原因。

Answer 5

我们可以通过设置html和正文之类的overflow来消除IE9，IE10，IE11，MEdge <= 20上的灰色闪烁

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

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

Answer 6

闪烁的另一个原因显然是固定元素内的另一个固定元素。至少那是我的理由。 Edge的错误行为似乎是随机的。

Answer 7

此行为是由于Microsoft的“平滑滚动”功能存在错误所致。发生在Win7及更高版本上的IE10和11中。我不建议您更改工作正常的代码来修复另一个MS错误。而是通过打开Internet Explorer设置禁用其“功能”，转到“高级”，然后在“浏览”类别中，这是您需要禁用“使用平滑滚动”的最后一个选项。

Answer 8

我的网站body已设为position: relative。删除它可以解决我的IE专属闪烁/跳跃问题。

IE中固定定位元素闪烁，如何解决？

8 个答案: