CSS 固定元素在 Chrome 中消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11258877/
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 element disappears in Chrome
提问by cchana
When scrolling on a website I've built, using the CSS property position: fixedworks as expected to keep a navigation bar at the very top of the page.
在我构建的网站上滚动时，使用 CSS 属性position: fixed按预期工作，将导航栏保持在页面的最顶部。
In Chrome, however, if you use the links in the navigation bar it sometimesdisappears. Usually, the item you've clicked on is still visible, but not always. Sometimes the entire thing disappears. Moving the mouse around brings back part of the element, and scrolling with the scroll wheel or arrow keys just one click brings the element back. You can see it happening (intermitently) on http://nikeplusphp.org- you might have to click on a few of the navigation the links a few times to see it happen.
但是，在 Chrome 中，如果您使用导航栏中的链接，它有时会消失。通常，您单击的项目仍然可见，但并非总是如此。有时整个事情都消失了。四处移动鼠标会带回元素的一部分，使用滚轮或箭头键滚动只需单击一下即可带回元素。您可以在http://nikeplusphp.org上看到它（间歇性地）发生- 您可能需要点击一些导航链接几次才能看到它发生。
I've also tried playing with the z-index and the visibility/display type but with no luck.
我也试过使用 z-index 和可见性/显示类型，但没有运气。
I came across this questionbut the fix didn't work for me at all. Seems to be a webkit issue as IE and Firefox work just fine.
我遇到了这个问题，但修复对我根本不起作用。似乎是一个 webkit 问题，因为 IE 和 Firefox 工作得很好。
Is this a known issue or is there a fix to keep fixed elements visible?
这是一个已知问题还是有保持固定元素可见的修复程序？
Update:
更新：
Only effects elements that have top: 0;, I tried bottom: 0;and that works as expected.
仅影响具有top: 0;，我尝试过bottom: 0;并且按预期工作的元素。
采纳答案by cchana
This is a webkit issue that has yet to be resolved, oddly making the jump with JavaScript, rather than using the #url value, doesn't cause the problem. To overcome the issue, I supplied a JavaScript version that takes the anchor value and finds the absolute position of the element with that ID and jump to that:
这是一个尚未解决的 webkit 问题，奇怪的是使用 JavaScript 进行跳转，而不是使用#url 值，不会导致问题。为了解决这个问题，我提供了一个 JavaScript 版本，它采用锚值并找到具有该 ID 的元素的绝对位置并跳转到该位置：
var elements = document.getElementsByTagName('a');
for(var i = 1; i < elements.length; i++) {
elements[i].onclick = function() {
var hash = this.hash.substr(1),
elementTop = document.getElementById(hash).offsetTop;
window.scrollTo(0, elementTop + 125);
window.location.hash = '';
return false;
}
}
I could refine this further and make it is that only it only looks for links beginning with a #, rather than ever atag it finds.
我可以进一步改进它，使它只查找以 a 开头的链接#，而不是a它找到的标签。
回答by TJ VanToll
Add -webkit-transform: translateZ(0)to the position: fixedelement. This forces Chrome to use hardware acceleration to continuously paint the fixed element and avoid this bizarre behavior.
添加-webkit-transform: translateZ(0)到position: fixed元素。这迫使 Chrome 使用硬件加速来持续绘制固定元素并避免这种奇怪的行为。
I created a Chrome bug for this https://bugs.chromium.org/p/chromium/issues/detail?id=288747. Please star it so this can get some attention.
我为此https://bugs.chromium.org/p/chromium/issues/detail?id=288747创建了一个 Chrome 错误。请为它加注星标，以便引起注意。
回答by Cooper
This fixes it for me:
这为我修复了它：
html, body {height:100%;overflow:auto}
回答by Neo
I was having the same issue with Chrome, it seems to be a bug that occurs when there is too much going on inside the page, 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.
我在 Chrome 上遇到了同样的问题，这似乎是页面内部发生太多事情时发生的错误，我能够通过将以下转换代码添加到固定位置元素来修复它，( 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;
background: white;
border-bottom: 2px solid #eaeaea;
width: 100%;
left: 0;
top: 0;
z-index: 9994;
height: 80px;
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
回答by cortopy
The options above were not working for me until I mixed two of the solutions provided.
在我混合提供的两个解决方案之前，上述选项对我不起作用。
By adding the following to the fixed element, it worked. Basically z-index was also needed for me:
通过将以下内容添加到固定元素，它起作用了。基本上我也需要 z-index：
-webkit-transform: translateZ(0);
z-index: 1000;
回答by GentiElezaj
回答by maslan
None of them worked for me except calling the modal via javascript
除了通过 javascript 调用模态外，没有一个对我有用
<a href="#\" onclick="show_modal();">Click me to open MyModal</a>
<script>
function show_modal()
{
MyModal.style.display = 'block';
}
</script>
other than this, none of the solutions above solved my problem.
除此之外，上述解决方案都没有解决我的问题。
回答by kumar chandraketu
This Worked for me . Add Overflowproperty to your top most container which can be Div or Form etc.
这对我有用。将Overflow属性添加 到最上面的容器，可以是 Div 或 Form 等。
div, form
{
overflow:visible;
}
回答by Ritesh Jung Thapa
I encountered the same issue in a different case. It was because of usage of same id in multiple place. For example i used #full 2 divs.
我在不同的情况下遇到了同样的问题。这是因为在多个地方使用了相同的 id。例如，我使用了#full 2 div。
It seems that mozilla and I.E. supports usage of same id in multiple cases. But chrome doesnot. It reacted with fixed element disappering in my case.
似乎 mozilla 和 IE 支持在多种情况下使用相同的 id。但铬没有。在我的情况下，它对固定元素消失做出反应。
Just removing the id's solved the problem.
只需删除ID即可解决问题。
回答by Angelika Johansson
If none of the answers above worked for you, make sure you aren't a dummy like me and have overflow: hidden;set on the fixed element :(
如果以上答案都不适合您，请确保您不是像我一样的傻瓜并且已经溢出：隐藏；在固定元素上设置:(
