css - 固定元素在 Chrome 中消失

Question

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

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

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

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

这是一个已知问题，还是有修复程序来保持固定元素可见？

更新：

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

score 205 · Accepted Answer

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

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

score 46 · Accepted Answer

46

这为我解决了这个问题：

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

于 2013-01-28T19:34:52.883 回答

score 19 · Accepted Answer

我在 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);
}

score 8 · Accepted Answer

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

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

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

score 2 · Accepted Answer

这是一个尚未解决的 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 开头的链接#，而不是a它找到的任何标记。

score 2 · Accepted Answer

如果添加后不起作用

-webkit-transform: translateZ(0)

比还添加

用户可扩展=否

在视口元

来源这里

它对我有用

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

div, form
{
  overflow:visible;    
}

score 1 · Accepted Answer

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

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

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

score 0 · Accepted Answer

如果以上答案都不适合您，请确保您不是像我这样的傻瓜并且溢出：隐藏；在固定元素上设置:(

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

0

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

于 2021-09-18T11:17:20.540 回答

css - 固定元素在 Chrome 中消失

13 回答 13

Related

Reference