固定元素在 Chrome 中消失

Posted 2023-02-22

【中文标题】固定元素在 Chrome 中消失

【英文标题】：Fixed element disappears in Chrome

【发布时间】：2012-06-30 19:31:21

【问题描述】：

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

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

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

我遇到了this question，但修复对我根本不起作用。似乎是一个 webkit 问题，因为 IE 和 Firefox 工作得很好。

这是一个已知问题，还是有解决方案以保持固定元素可见？

更新：

仅影响具有top: 0; 的元素，我尝试了bottom: 0; 并且按预期工作。

【问题讨论】：

不知是否与this issue有关...

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

有趣的是，我遇到了完全相反的问题，top:0 显示元素但bottom:0 不显示。不幸的是，这些答案都没有解决它。

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

@FullyHumanProgrammer 谢谢，这个问题早在我切换到 HTTPS 之前就已经发布了，但看起来有些东西已经改变了。会调查的。

【参考方案1】：

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

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

【讨论】：

我与这个错误斗争了几个小时，你救了我。这应该是公认的答案！谢谢。

这对我有用，顺便说一句，我只在 Chrome/Win 上遇到了问题，在 Chromium/Ubuntu 上没有。

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

发现了这个问题，Chrome 41.0.2224.3的答案解决了这个问题。谢谢！

完美答案让你想知道如果没有***你会怎么做！

【参考方案2】：

这为我解决了这个问题：

html, body height:100%;overflow:auto

【讨论】：

对于数百万行的代码库，这是一个非常不舒服的问题……但是，它有效！！！！！！谢谢

以上答案对我不起作用，但确实如此。谢谢你:)

这为我解决了问题。这个问题我遇到过很多次了，一般都是这样解决的。它只发生在真实设备上，每次它让我怀疑它是否与滑动有关。

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

我正在使用绝对元素，它们会随机消失，在它们应该在的位置显示白框（它们的空间被保留，但它们显示为白色区域！）一旦你点击它们中的任何一个（即使不是可点击的元素）他们重新出现！所以这似乎是某种渲染问题！添加后我仍在测试，但我认为它也适用于那些绝对元素！他们现在可以正确渲染，没有空格（至少现在）。我也不知道为什么这也有帮助！已经为此苦苦挣扎了一段时间！谢谢！！

【参考方案3】：

我在 Chrome 上遇到了同样的问题，这似乎是当页面内部发生太多事情时发生的错误，我能够通过将以下转换代码添加到固定位置元素来修复它，( transform: translateZ(0);-webkit-transform: translateZ(0);) 强制浏览器使用硬件加速来访问设备的图形处理单元 (GPU) 以使像素飞行。另一方面，Web 应用程序在浏览器的上下文中运行，这使软件可以完成大部分（如果不是全部）渲染，从而减少了转换的动力。但是 Web 一直在迎头赶上，现在大多数浏览器供应商都通过特定的 CSS 规则提供图形硬件加速。

使用-webkit-transform: translate3d(0,0,0);将为 CSS 过渡启动 GPU，使它们更平滑（更高的 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);

【参考方案4】：

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

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

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

【讨论】：

这个解决方案今天对我有用。 Chrome 45 出来了，我的网站有一个（位置：已修复）问题。添加 (-webkit-transform: translateZ(0) 似乎已修复它。（我也知道 z-index，但我的网站已经为受影响的元素设置了 z-index。）

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

【参考方案5】：

这是一个尚未解决的 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 标记。

【参考方案6】：

如果添加后不起作用

-webkit-transform: translateZ(0)

比还加

用户可扩展=否

关于视口元

来源here

对我有用

【参考方案7】：

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

似乎 Mozilla 和 I.E.支持在多种情况下使用相同的 id。但铬没有。在我的情况下，它对固定元素的消失做出了反应。

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

【参考方案8】：

除了通过 javascript 调用模式之外，它们都不适合我

<a href="#\" onclick="show_modal();">Click me to open MyModal</a>
<script>
function show_modal()

  MyModal.style.display = 'block';

</script>

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

【参考方案9】：

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

div, form

  overflow:visible;    

【参考方案10】：

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

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

所以我只是打开了 Photoshop 并手动编辑了图像。然后把它贴在我的网站上。 有效。 但是对于固定元素下的 div 还是无效的。

【参考方案11】：

如果以上答案都不适合你，请确保你不是像我一样的傻瓜，并且在固定元素上设置了 overflow: hidden; :(

【讨论】：

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

【参考方案12】：

如果以上都不起作用怎么办？置顶+移动侧菜单推送内容的简单案例。

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

因此，到目前为止，范围还没有解决方法，因此我选择了一个 JS 替代方案来重新计算固定元素的绝对位置。见这里：https://***.com/a/21487975/2012407

【参考方案13】：

就我而言，我只是添加了min-height: 100vh;到fixed 元素，可能对某人有用