奇怪的WebKit的问题与位置：固定

http://workshop.wpcoder.com/daniel/tvexperts/奇怪的WebKit的问题与位置：固定

在Chrome中，如果你点击“生产”，然后“联系”的立场：固定的头消失了，但回来当你移动滚轮。我不知道是什么原因，到目前为止，我只能在Safari和Chrome中检测到它，但Firefox很好，所以我认为它是一个webkit的bug。

2011-02-12 Daniel

如果你想解决这个问题，你可能想隐藏和显示完整的身体，以强制其重绘整个。 – pimvdb 2011-02-12 20:42:09

我不知道你的意思，pimvdb。 – Daniel 2011-02-12 20:44:28

按下联系人链接后，您可能需要执行：window.scrollTo（window.pageXOffset，window.pageYOffset-1）`。它将您的页面向上滚动一个像素，从而解决标题消失。（我的第一个建议是错误的，对不起。） – pimvdb 2011-02-12 20:53:59

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

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

本地测试后，我看到了真正的问题:)。我创建了一个correction.css和测试，在Opera 11，Safari 5的，火狐3.6，火狐4.0测试版11和Chrome 9中的所有Mac OS X上的文件有这样的内容：

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

来源

2011-02-13 16:49:56 tenshimsm

高度调节做对我没意义。对于我在Chrome中消失的固定位置元素的问题的修复方法是： window.scrollTo(window.pageXOffset,window.pageYOffset-1);

来源

2012-09-10 17:19:08 user1487045

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

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

希望这会有所帮助。

来源

2013-07-18 11:49:07 LiamGoodacre

默认情况下，固定位置元素在Blink和WebKit中均被提升到合成图层。 Safari中没有必要提起固定位置元素，因为它们已经合成。

你需要做的是相反的。您需要解除所有非固定：用translateZ（0）位置的元素：

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

来源

2016-04-14 20:35:17

奇怪的WebKit的问题与位置：固定

回答

相关问题