固定元素在Chrome中消失

75

在我建立的网站上滚动时，使用CSS属性position: fixed可以按预期方式将导航栏保持在页面的顶部。

但是，在Chrome浏览器中，如果您使用导航栏中的链接，该链接有时会消失。通常，您单击的项目仍然可见，但并非总是可见。有时整个事情消失了。左右移动鼠标可以使元素的一部分退回，而使用滚轮或箭头键滚动只需单击一下即可使元素返回。您可以在http://nikeplusphp.org上（间歇地）看到它的发生-您可能必须单击几次导航链接，才能看到它的发生。

我也尝试过使用z-index和可见性/显示类型，但是没有运气。

我遇到了这个问题，但修复程序根本不适合我。似乎是webkit的问题，因为IE和Firefox正常工作。

这是一个已知问题，还是有一种使固定元素可见的修补程序？

更新：

只有具有top: 0;，我尝试过bottom: 0;并且可以按预期工作的效果元素。

css webkit position

— 茶
source

我想知道是否与这个问题有关……

— raina77ow 2012年

感谢您提供的链接，我为该话题做出了贡献，但仍然想知道是否有解决此问题的方法。

— cchana 2012年

有趣的是，我有一个完全相反的问题，在哪里top:0显示元素但bottom:0没有显示。不幸的是，这些答案都无法解决。

— CodingWithSpike 2015年

附带一提，您的网页正在尝试加载不安全的脚本（HTTP协议），而网页的常规协议是HTTPS。您可能应该修复它，因为这是一个安全问题，并且主要的浏览器（例如chrome）最初不会加载脚本，这可能会破坏您的页面

— FullyHumanProgrammer

@FullyHumanProgrammer谢谢，这个问题是在我切换到HTTPS之前很久才发布的，但是看起来有些变化。会调查一下。

— cchana '16

202

添加-webkit-transform: translateZ(0)到position: fixed元素。这迫使Chrome使用硬件加速来连续绘制固定元素并避免这种奇怪的行为。

我为此https://bugs.chromium.org/p/chromium/issues/detail?id=288747创建了一个Chrome错误。请加注星标，以便引起注意。

— TJ VanToll
source

5

我为这个错误困扰了几个小时，您救了我。这应该是公认的答案！谢谢。

— smajl 2014年

1

这对我有用，顺便说一句，我仅在Chrome / Win上有问题，而不在Chromium / Ubuntu上有问题。

— Paolo Mioni 2014年

2

Chrome38 / OSX中仍然存在错误，此答案仍然有效。

— tobiv 2014年

2

发现此问题后，Chrome 41.0.2224.3的答案解决了该问题。谢谢！

— Diego Sucaria 2014年

3

完美答案的那一刻让您想知道，如果不存在stackoverflow，该怎么办！

— 杰夫

45

这为我解决了：

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

— 库珀
source

1

询问数以百万计的行的代码库是一个非常不舒服的问题……但是嘿，它可行！！！！谢谢

— Asad Hasan

上面的答案对我没有用，但是确实有用。谢谢您：)

— 查理·格林曼

这为我解决了。我已经多次遇到此问题，通常是通过此问题解决的。它仅在真实设备上发生，并且每次使我想知道是否与滑动有关。

— 基督教徒

这为我解决了这个问题，而@TJ VanToll的回答却没有

— abidibo

我使用的是绝对元素，一旦您单击其中任何一个元素（即使不是可单击的元素），它们也会随机消失，并在适当的位置显示白框（保留了它们的空间，但它们显示为白色区域！）。所以这似乎是某种渲染问题！添加此代码后，我仍在测试，但我认为它也适用于那些绝对元素！它们现在可以正确渲染，没有空格（至少尚未）。我不知道为什么这样做有帮助！为此苦了一段时间！谢谢！！

— 立德（Khaled）

19

我在使用Chrome时遇到了同样的问题，这似乎是一个错误，当页面中的内容过多时，我可以通过将以下转换代码添加到固定位置元素（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;
    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);
}

— 新
source

8

在我混合提供的两个解决方案之前，以上选项对我不起作用。

通过将以下内容添加到固定元素，它可以工作。基本上我也需要z-index：

-webkit-transform: translateZ(0);
z-index: 1000;

— 皮质
source

1

该解决方案今天对我有用。Chrome 45出现了，我的网站出现了（位置：固定）问题。添加（-webkit-transform：translateZ（0）似乎已修复它。（我也知道z-index，但是我的站点已经为受灾元素设置了z-index。）

— Jerome P Mrozak 2015年

-webkit-transform: translateZ(0);为我做了。不需要使用z-index。

— Marco Roy

2

这是一个尚待解决的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;
    }
}

我可以进一步完善它，使其成为仅查找以开头的链接#，而不是a查找到的标签。

— 茶
source

2

如果添加后不起作用

-webkit-transform：translationZ（0）

比还添加

用户可扩展=否

在视口上

来源在这里

它对我有用

— 根蒂·埃莱扎杰（GentiElezaj）
source

1

在不同的情况下，我遇到了相同的问题。这是因为在多个地方使用了相同的ID。例如，我使用#full 2 divs。

看来mozilla和IE在多种情况下都支持使用相同的ID。但是铬没有。在我的情况下，它的反应是分解固定元素。

只需删除ID即可解决问题。

— Ritesh Jung Thapa
source

1

除了通过javascript调用模式之外，他们都不为我工作

<a href="#\" onclick="show_modal();">Click me to open MyModal</a>
<script>
function show_modal()
{
  MyModal.style.display = 'block';
}
</script>

除此之外，以上解决方案都无法解决我的问题。

— 马斯兰
source

1

这对我有用。将Overflow属性添加到最顶部的容器中，该容器可以是Div或Form等。

div, form
{
  overflow:visible;    
}

— 库马尔·钱德拉克图
source

1

我也遇到了同样的问题。用于网站的主页。我做了一个固定的页眉，并在前海报上使用了一张图片。一切正常。但是，当我更改海报图像的不透明度的那一刻，我的标题的位置就固定了：消失了。它存在于chrome开发人员工具中。但是在网站上是完全透明的。

我尝试了StackOverflow，W3shools，Geeke4geeks的所有解决方案。但是，如果一件事被解决，另一件事就搞砸了。

因此，我刚刚打开photoshop并手动编辑了图像。然后将其发布在我的网站上。有效。但是，对于固定元素下的div而言，它仍然无效。

— 阿米特·古普塔（Amit Gupta）
source

0

如果以上答案对您都不起作用，请确保您不是像我这样的假人，并且有溢出的东西：隐藏；设置在固定元素上:(

— 安吉莉卡·约翰逊（Angelika Johansson）
source

有趣的隐藏的溢出实际上实际上使transformZ修复对我有用！大声笑

— Primus202 '18

0

如果以上都不起作用怎么办？粘贴标头+移动侧菜单推送内容的简单情况。

我试图找到一种避免固定元素（粘性标头）被翻译的方法，但是在这种情况下，没有什么是一个好的选择。

因此，由于到目前为止在范围上尚无解决方法，因此我选择了一种JS替代方法来重新计算固定元素的绝对位置。看到这里：https : //stackoverflow.com/a/21487975/2012407

— 安东尼
source