Mac OS X WebKit和CSS位置：固定滾動

我們在Mac OS X上使用WebKit時遇到了一個優化問題，我們希望有人可以幫助我們。Mac OS X WebKit和CSS位置：固定滾動

我們爲Mac OS X編寫了一個Cocoa應用程序，該應用程序基本上管理指向我們在線網站的單個WebView。一切工作都很好。然而，我們的網站使用CSS的位置：固定以保持一個薄的「標題欄」鎖定在WebView的頂部，類似於StackOverflow.com頂部的橙色「歡迎」大橙色條。我們已經確定，在位置：固定激活的情況下，滾動WebView會強制整個網頁重新繪製自身，這將導致滾動速度極慢。位置：固定禁用，滾動速度非常快，流暢;只需要繪製「滾動到視圖中」的頁面元素。

我們知道這不是我們Cocoa應用程序代碼中的錯誤，也不是我們的HTML/CSS代碼的問題。使用Apple的WebKit測試代碼也會發生同樣的慢速滾動。我們可以將Apple的測試代碼指向http://www.StackOverflow.com作爲測試，我們看到完全相同的行爲。 Mozilla缺陷數據庫中還有一個測試頁，我們一直在用它來測試這個問題（https://bug201307.bugzilla.mozilla.org/attachment.cgi?id=139911）。奇怪的是，Mac上的一些基於WebKit的瀏覽器（例如Safari和Chrome）沒有這個問題。使用CSS的位置在頁面上滾動總是很快：用這兩個瀏覽器修復。

是否有其他人在OS X上使用WebKit時遇到過這個問題？如果是這樣，我們可以做些什麼來加快我們的滾動？謝謝。

來源

2011-11-01 philbert1

我想我正在經歷這種情況。看看http://harrisnovick.com/orange並點擊文章圖塊。我將嘗試確認位置：fixed是否導致可憐的滾動性能。 – lightyrs

哈里斯，我看到你的網站有一些重繪問題，但我不認爲這是同樣的問題。如果我將鼠標光標懸停在某個網格元素上並進行滾動，則滾動會變慢一點，因爲所有網格元素都在滾動操作期間重新繪製自己。但是，如果將鼠標光標放在窗口外並滾動，則網格元素不會自行重繪。此外，左側的橙色欄似乎不會重新繪製。 – philbert1

這一切都讓我覺得你的問題與我的問題稍有不同。在我們的窗口中，所有元素都一致地重繪自己，包括位置：固定的一個。 – philbert1

我可能會離開這裏，因爲我不確定是否同樣適用於您的網頁視圖，但使用強制導航到其自己的圖層的樣式可能會有所幫助。

類似translateZ（0）或translate3d（0,0,0，）。在使用Phonegap進行構建時，我遇到過類似的問題，並且應用了一些思路來實現分層。

我相信瀏覽器可以在涉及第三維的情況下利用硬件加速。

來源

2015-01-26 19:14:19 thecraighammond

我有一個類似的問題：當我滾動頁面時，固定條閃爍。所以我強迫的WebView使用圖層和我固定

[w setWantsLayer:YES];

來源

2015-05-23 08:20:15

我在web視圖基於Mac的應用程序也有類似的問題。它具有頁眉和頁腳的位置：固定的CSS屬性。最新的10.10.x及以上版本的webkit不會遇到這個問題。它發生在webkit for Mavericks（10.9.x）。我通過設置這些屬性爲webview工作

[self.webView setWantsLayer:YES]; 
    [self.webView setCanDrawSubviewsIntoLayer:YES];

來源

2016-03-04 10:07:45 Ali

Mac OS X WebKit和CSS位置：固定滾動

回答

相關問題