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

Question

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

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

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

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

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

Answer 1

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

Answer 2

我们可以通过设置html和body like的overflow来消除IE9、IE10、IE11、MEdge

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

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

Answer 3

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

Answer 4

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

Answer 5

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

outline: 1px solid transparent;

删除它，它可能是原因。

Answer 6

三件事会导致 IE 11 在滚动时固定位置元素闪烁/断断续续/延迟：

1. 如果您有“溢出：自动；”在父容器元素上，将其移除。

2. 移除背景附件：已修复；从固定位置元素。

3. 从固定位置元素中移除边框半径（仅限移动 IE）。

Answer 7

显然，“错误”仅影响 Windows 8.1 或 8.0 上的 IE11。删除 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 8

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

使用-webkit-transform: translate3d(0,0,0);将为 CSS 过渡启动 GPU，使它们更平滑（更高的 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);
    }