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

【问题标题】：Weird webkit issue with position: fixed位置的奇怪 webkit 问题：已修复
【发布时间】：2011-06-26 05:09:28
【问题描述】：

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

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

【问题讨论】：

如果你想解决这个问题，你可能想隐藏和显示整个身体，以迫使它重新绘制整体。
我不明白你的意思，pimvdb。
按下联系人链接后，您可能需要执行此操作：window.scrollTo(window.pageXOffset,window.pageYOffset-1)。它将您的页面向上滚动一个像素，从而解决标题消失的问题。（我的第一个建议是错误的，抱歉。）
如果这是 Webkit 中的一个明显错误，您是否考虑将其提交给 Google 和/或 Apple 以修复它？
嗯，我不知道如何修复它，是什么原因造成的等等......我唯一的线索是它可能与嵌入的 Youtube 视频（Flash）有关

标签： css webkit position

【解决方案1】：

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

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

希望这会有所帮助。

【讨论】：

【解决方案2】：

实际上，如果你仔细观察，在 Firefox 中也有同样的错误。不同之处在于它在那里显示的内容来自上一个链接。也许您的问题可以解决，在 CSS 中为链接的 div 定义一个最小高度值。

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 */

【讨论】：

我已经在这里测试过了，现在我看到了真正的问题。 :) 喜欢！

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

你需要做的是相反的。您需要使用 translateZ(0) 提升所有非固定位置元素：

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

【讨论】：