logo标签列表

使用 position: fixed 出现的 Webkit 浏览器问题

csswebkitposition
8

http://workshop.wpcoder.com/daniel/tvexperts/

在Chrome浏览器中，如果您点击“Production”，然后再点击“Contact”，则fixed定位的标题栏会消失，但是当您滚动鼠标时，它会重新出现。我不知道原因是什么，目前只能在Safari和Chrome浏览器中检测到此问题，但Firefox浏览器没有这个问题，所以我认为这是一个Webkit浏览器的bug。

如果您想解决这个问题，您可能需要隐藏并显示完整的主体，以便强制它重新绘制整个内容。 - pimvdb
我不知道你的意思，pimvdb。 - Daniel
在点击联系链接后，您可能希望执行以下操作：window.scrollTo(window.pageXOffset,window.pageYOffset-1)。它会将页面向上滚动一个像素，从而解决标题消失的问题。（我的第一个建议是错误的，抱歉。） - pimvdb
如果这是Webkit中一个可以演示的错误，您是否考虑将其提交给谷歌和/或苹果以进行修复？ - Spudley
嗯，我不知道如何修复它，是什么原因导致的等等... 我唯一的线索是它可能与嵌入的Youtube视频（Flash）有关。 - Daniel
4个回答
22

解决此问题的一种方法是将固定位置的元素强制进入其自己的渲染层。 可以通过应用3D变换来实现：

.navbar-fixed-top {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

希望这能有所帮助。

7

实际上，如果您仔细观察，Firefox也有同样的错误。不同之处在于它显示了来自先前链接的较少内容。也许您的问题可以通过在CSS中定义链接div的min-height值来解决。

div#contact {
min-height:700px;
height:auto
}

在本地测试后，我看到了真正的问题 :). 我创建了一个correction.css文件，并在Mac OS X上的Opera 11、Safari 5、Firefox 3.6、Firefox 4.0 beta 11和Chrome 9中进行了测试。文件内容如下：

html, body {height:100%;overflow:auto}/* makes the the magic trick of disappearance, disappear */
#contact {min-height:700px;height:auto}/* makes the contact div h2 closer to the top */
我在这里进行了测试，现在我看到了真正的问题。:) 真是太神奇了！ - msmafra
2

对我来说，高度调整没有任何作用。对于固定位置元素在Chrome中消失的问题，解决方法是： window.scrollTo(window.pageXOffset,window.pageYOffset-1);

1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接