奇怪的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的問題與位置：固定

回答

相關問題