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

Question

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

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

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

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

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

Answer 1

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

1. 如果你有"溢出:自动;" 在父容器元素上,删除它.

2. 删除背景附件:固定; 来自固定位置元素.

3. 从固定位置元素中删除border-radius(仅限移动IE).

Answer 2

我遇到了同样的问题,它似乎是一个错误,当你的计算机规格要处理的页面内部太多时,我能够通过将以下转换代码添加到固定位置元素来修复它, (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

我们可以通过设置overflowhtml和body 来消除IE9，IE10，IE11，MEdge <= 20上的灰色闪烁

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

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

Answer 4

显然，“错误”仅影响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;
}