javascript 固定定位元素仅在 IE 中闪烁,如何解决?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/20995478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fixed positioned element flicker in IE only, how to solve?
提问by Codebeat
Weird problem in IE11, the fixed background of the following project flickers when using mousewheel or cursor keys only. This is a bug, for sure.
IE11 中的奇怪问题,修复了以下项目的固定背景在仅使用鼠标滚轮或光标键时会闪烁。这是一个错误,这是肯定的。
website: http://gerbrandy.zitemedia.nl:88/
网站:http: //gerbrandy.zitemedia.nl: 88/
I use a script to resize the background proportional but this is not the problem because the resize event does not fire when scrolling, so it is not a problem of the script. It has something to do with a fixed positioned element. This script works okay for several years in all other browsers.
我使用脚本来按比例调整背景大小,但这不是问题,因为滚动时不会触发调整大小事件,所以这不是脚本的问题。它与固定定位元素有关。这个脚本在所有其他浏览器中可以正常工作几年。
I have no idea how to fix this. Tried several things, but don't know how to disable javascript for example but should not be the case. I'm using IE11 on Windows 8.1.
我不知道如何解决这个问题。尝试了几件事,但不知道如何禁用 javascript,但不应该是这种情况。我在 Windows 8.1 上使用 IE11。
Does somebody has some same experience with this and do you know how to work around this problem?
是否有人对此有相同的经验,您知道如何解决此问题吗?
回答by Adamy
Three things can cause IE 11 flickering/choppy/delay for fixed position element while scrolling:
滚动时固定位置元素可能导致 IE 11 闪烁/断断续续/延迟的三件事:
If you have an "overflow: auto;" on the parent container element, remove it.
Remove background-attachment:fixed; from the fixed position element.
Remove border-radius from the fixed position element (mobile IE only).
如果您有“溢出:自动;” 在父容器元素上,将其删除。
删除背景附件:固定;从固定位置元素。
从固定位置元素中移除边框半径(仅限移动 IE)。
回答by Neo
I was having the same issue, it seems to be a bug that occurs when there is too much going on inside the page for your computer specs to handle, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);
) that forces the browser to use hardware acceleration to access the device's graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.
我遇到了同样的问题,这似乎是一个错误,当页面内部发生太多事情而您的计算机规格无法处理时,我能够通过将以下转换代码添加到固定位置元素来修复它, ( transform: translateZ(0);-webkit-transform: translateZ(0);
) 强制浏览器使用硬件加速来访问设备的图形处理单元 (GPU) 以使像素飞扬。另一方面,Web 应用程序在浏览器的上下文中运行,这让软件可以完成大部分(如果不是全部)渲染,从而减少转换的马力。但是 Web 一直在追赶,大多数浏览器供应商现在都通过特定的 CSS 规则提供图形硬件加速。
Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).
使用 -webkit-transform: translate3d(0,0,0); 将让 GPU 开始执行 CSS 转换,使它们更流畅(更高的 FPS)。
Note:translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.
注意: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);
}
回答by TLbiz
We can remove grey flicker on IE9, IE10, IE11, MEdge<=20 by setting overflow
of html and body like
我们可以通过设置overflow
html 和 body来去除 IE9, IE10, IE11, MEdge<=20 上的灰色闪烁
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
回答by mch
Apparently the "bug" only affects IE11 on Windows 8.1, or maybe 8.0 too. Removing background-attachmend:fixed
worked for me. Apparently that rule was redundant, since the background image displays correctly in every browser without that rule. A second solution is to disable Smooth Scrolling in the IE settings, but that's not optimal since it's enabled in a default installation.
显然,“错误”仅影响 Windows 8.1 或 8.0 上的 IE11。删除background-attachmend:fixed
对我有用。显然该规则是多余的,因为背景图像在没有该规则的每个浏览器中都能正确显示。第二种解决方案是在 IE 设置中禁用平滑滚动,但这不是最佳选择,因为它在默认安装中启用。
Flickering CSS:
闪烁的 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;
}
...and new code (1 line removed):
...和新代码(删除了 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;
}
回答by dewwwald
A hardware acceleration technique as follow caused mine.
下面的硬件加速技术引起了我的。
outline: 1px solid transparent;
outline: 1px solid transparent;
Remove it and it might be the cause.
删除它,这可能是原因。
回答by FabianS
This behaviour is due to a bug with Microsofts "Smooth Scroll" feature. Happens in IE10 and 11 on Win7 and up. I wouldn't recommend to alter your perfectly working code to fix yet another MS bug. Instead disable their "feature" by opening Internet Explorers Settings, go to Advanced and in the category "Browsing" it's the last option which you need to disable "Use smooth scrolling".
这种行为是由于 Microsoft 的“平滑滚动”功能的错误造成的。在 Win7 及更高版本的 IE10 和 11 中发生。我不建议更改您完美工作的代码来修复另一个 MS 错误。而是通过打开 Internet Explorer 设置来禁用它们的“功能”,转到“高级”,在“浏览”类别中,这是您需要禁用“使用平滑滚动”的最后一个选项。
回答by webdesignwien
Another reason for flickering can obviously be another fixed element inside the fixed element. At least that was the reason in my case. The false behaviour of Edge appears to be random.
闪烁的另一个原因显然可能是固定元素内部的另一个固定元素。至少这就是我的原因。Edge 的错误行为似乎是随机的。
回答by LUKUS
My Website's body
was set to position: relative
.
Removing that did the trick for my IE-exclusive flickering/jumping problem.
我的网站body
设置为position: relative
. 删除它可以解决我的 IE 独有的闪烁/跳跃问题。