固定元素在Chrome中消失

Question

在我构建的网站上滚动时,使用CSS属性position: fixed按预期工作,以在页面顶部保留导航栏.

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

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

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

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

更新:

只有效果元素top: 0;,我试过bottom: 0;,并按预期工作.

Answer 1

Add -webkit-transform: translateZ(0) to the position: fixed element. This forces Chrome to use hardware acceleration to continuously paint the fixed element and avoid this bizarre behavior.

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.

Answer 2

这为我解决了这个问题:

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

Answer 3

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

Answer 4

在我混合提供的两个解决方案之前,上面的选项对我不起作用.

通过将以下内容添加到固定元素,它工作.基本上我也需要z-index:

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

Answer 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它找到的任何标记。