Javascript 只在IE中定位元素闪烁，如何解决？

在IE11中，当只使用鼠标滚轮或光标键时，以下项目的固定背景会闪烁。这当然是一个bug

网站：

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

我不知道如何解决这个问题。尝试了几种方法，但不知道如何禁用javascript，例如，但不应该是这样。我在Windows8.1上使用IE11

---

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

我也有同样的问题，这似乎是一个错误，当页面中的内容太多，您的计算机规格无法处理时，就会发生，我可以通过向fixed position元素添加以下转换代码来修复它，（

transform:translateZ（0）；-webkit transform:translateZ（0）；

）强制浏览器使用硬件加速来访问设备的图形处理单元（GPU）以使像素飞起来。另一方面，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);
    }

显然是“臭虫”仅影响Windows 8.1或8.0上的IE11。删除

背景附件end: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行）：

---

滚动时，有三种情况可能会导致固定位置元素的IE 11闪烁/突变/延迟：

如果父容器元素上有“溢出：自动；”，请将其删除

从“固定位置”元素中删除背景附件：固定

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

---

硬件加速技术如下所示

轮廓：1px实心透明；

---

删除它可能就是原因。

我的网站的

正文

已设置为

位置：相对

。

---

---

删除它解决了IE独有的闪烁/跳跃问题。

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

我们可以删除IE9、IE10、IE11、MEdge上的灰色闪烁此行为是du微软“平滑滚动”功能的漏洞。发生在Win7和更高版本的IE10和IE11中。我不建议更改您的完美工作代码来修复另一个MS漏洞。相反，通过打开Internet Explorer设置禁用其“功能”，转到高级，在类别“浏览”中，这是您需要禁用的最后一个选项“使用平滑滚动”。

在Win 7（64）上使用IE11似乎对我有效。这可能是特定于Windows版本（7/8/8.1-现代版或桌面版）的吗？Hai Nigel，谢谢你的测试。嗯，我使用的是Windows 8.1荷兰版，但我觉得没有那么特别？我没有在Win7上测试过。你使用的是现代/触摸界面还是桌面界面，因为它们有时呈现出不同的效果？@Nigel，不，我没有使用糟糕的Windows 8界面。我使用的Windows 8没有新的GUI尽可能多。这让我松了一口气：）我现在在工作，所以只有一台Windows 7计算机。也许其他人可以比较Windows 7和Windows 8 IE11s，看看是否有区别。啊，谢谢你这么久以来提供的解决方案。不在这个烂公司工作（用他们的烂脚本、CMS和模板）再也不能尝试了。但你的解决方案听起来似乎有道理。我认为背景大小必须是CSS的东西，而不是脚本。此外，背景大小：封面在iPad 1或2上可能是个问题。你必须以像素为单位指定屏幕大小。溢出为我排序。我使用溢出：auto将我的元素移出包含元素；是的，边界半径在IE手机上给我带来了麻烦，变成了“溢出：可见；在父元素中，它为我做了这件事。（它是“overflow:hidden；”）我强迫家长使用

位置：static

，这解决了我的问题。删除

背景附件：fixed

对我有效。非常随机，但这有效。它嵌套在my fixed position div的深处，但仍会导致整个内容闪烁。要优化固定元素，请使用

-ms transform:translateZ（0）

这仍然会在ie上优化它，在Safari上你不会看到闪烁。我正在尝试消除chrome上的闪烁，translateZ（0）解决了它。再次感谢！我猜chrome也是随机的。我有一个背景视频自动播放，它在“ie边缘”上闪烁“。我不知道为什么会这样，但谢谢你！：）这是可行的，但要注意不要只在任何元素上粘贴变换；它可能会将所有子元素与

位置：fixed

混淆。（）很显然，外面也或多或少有一个问题。

#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;
}

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

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