Question

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

在Chrome中，如果单击“生产”，然后单击“联系”，则位置：固定标题消失，但在移动滚轮时返回。我不知道原因是什么，到目前为止我只能在Safari和Chrome中检测到它，但Firefox很好，所以我认为这是一个webkit错误。

Answer 1

解决此问题的一种方法是将固定位置元素强制放入自己的渲染层。这可以通过应用3d变换来完成，例如：

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

希望这有帮助。

Answer 2

实际上，如果你看得很近，在Firefox中也有同样的错误。不同之处在于，它在前面的链接中显示的内容较少。也许你的问题可以解决，在CSS中定义链接的div的最小高度值。

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

经过本地测试后，我看到了真正的问题:)。我在Mac OS X上创建了一个correction.css并在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 */

Answer 3

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

Answer 4

默认情况下，固定位置元素被提升到Blink和WebKit中的合成图层。无需在Safari中提升固定位置元素，因为它们已经合成。

你需要做的是反过来。您需要使用translateZ（0）提升所有非fixed：position元素：

http://newscentral.exsees.com/item/528d72c6d22fab46e4eb18e5cb8fece0-0d5a1eca143f58f995dc015e265514cb

奇怪的webkit问题与位置：已修复

4 个答案: