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

Posted 2023-03-06

【中文标题】仅在 IE 中固定定位元素闪烁，如何解决？

【英文标题】：fixed positioned element flicker in IE only, how to solve?

【发布时间】：2014-01-26 13:02:26

【问题描述】：

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

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

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

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

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

【问题讨论】：

在 Win 7 (64) 上使用 IE11 似乎对我有用。这是否可能特定于 Windows 版本（7 / 8 / 8.1 - 现代或桌面）？

海奈杰尔，感谢您的测试。好吧，我使用的是 Windows 8.1 荷兰语版本，但我认为这听起来并不特别？我没有在Win7上测试过。

您使用的是 Modern/Touch 界面还是桌面界面，因为它们有时呈现不同？

@Nigel，不，我没有使用 Windows 8 糟糕的界面。我尽可能使用没有新 GUI 的 Windows 8。

那是一种解脱 :) 我现在在工作，所以只有一台 Windows 7 机器。也许其他人可以比较一下Windows 7和Windows 8 IE11s，看看有没有区别。

【参考方案1】：

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

【讨论】：

显然也有或多或少的working JS solution。

【参考方案2】：

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

html
  overflow: hidden;
  height: 100%;    


body
  overflow: auto;
  height: 100%;

【参考方案3】：

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

【参考方案4】：

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

【参考方案5】：

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

outline: 1px solid transparent;

删除它，它可能是原因。

【讨论】：

非常随机，但这有效。它嵌套在我的固定位置 div 的深处，但它仍然导致整个东西闪烁。

优化固定元素使用-ms-transform: translateZ(0);这仍然会在ie上优化它，你不会在Safari上看到闪烁。

我正在尝试消除 chrome 上的闪烁，translateZ(0) 解决了它。再次感谢！我猜 chrome 也是随机的。

我有一个背景视频自动播放，它在“IE Edge”上闪烁。不知道为什么会这样，但谢谢！ :)

【参考方案6】：

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

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

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

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

【讨论】：

溢出为我排序。我使用溢出将我的元素移出包含元素：auto;它奏效了。

是的，border-radius 在 IE mobile 上给我带来了麻烦

更改为“溢出：可见；”在父元素中为我做了。 （它是“溢出：隐藏；”）

我强迫父母拥有position: static，这解决了我的问题。

删除 background-attachment:fixed 对我有用。

【参考方案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;

【讨论】：

啊，感谢您这么久以来的解决方案。不再在这家糟糕的公司工作（使用他们糟糕的脚本、CMS 和模板），所以不能尝试。但是您的解决方案听起来很合理。我认为背景大小必须是 CSS 而不是脚本。在 iPad 1 或 2 上 background-size:cover 也可能是个问题。您必须改为以像素为单位指定屏幕尺寸。

【参考方案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);
    

【讨论】：

这行得通，但要注意不要在任何元素上粘贴变换；它可能会用position:fixed 混淆任何子元素。 (***.com/questions/2637058/…)