Safari中的雜亂滾動

我的微型網站出現問題。當我滾動時，除Safari之外的所有瀏覽器都很流暢。當我在Safari中進行滾動時，內容div會頻繁跳轉或移動（它應該保持原樣），並使滾動看起來不連貫。你有什麼想法可能是錯的？Safari中的雜亂滾動

2014-06-11 Dominik Hadl

我接過來一看，並沒有看到「波濤洶涌」滾動你提到的（看它多，有人漫無 - 有時是光滑的，其他時間非常波濤洶涌）。

看來你已經得到了你的parallax回調在Safari上一些性能問題（雖然它不會讓我感到吃驚，如果它的一些馬車實現Safari瀏覽器...）

有一件事我會建議正在採取查看webkit的。對於測試，我用邏輯來更新raf中的偏移量（並緩存了值window.pageYOffset），在我看來，它看起來更平滑。

function parallax(e) { 
    window.webkitRequestAnimationFrame(function() { 
     var offset = window.pageYOffset; 
     a.style.top = (offset/2) + "px"; 
     b.style.top = (offset/2) + "px"; 
     textbox.style.top =- (offset * 0.7) + "px"; 
     textbox2.style.top =- (offset * 0.7) + "px"; 
    }); 
}

說實話，你可以使用raf所有的瀏覽器（如果他們支持它）。

動畫元素的另一個用法是加速動畫元素所在的圖層。有幾種方法可以做到這一點，但最簡單的方法是使用-webkit-transition並設置translateZ(0)。它不會傷害添加兩條額外的線條，以及：

-webkit-backface-visibility: hidden; 
-webkit-perspective: 1000;

另外，我注意到，你偏移量（使用style）的一些元素是position: relative - 就個人而言，我會說，這是任何元素進行動畫應該是position: absolute。這將從DOM中刪除元素，並抵消它不會導致迴流到周圍的元素（這可能會導致你的不連續性）。

編輯 - 我注意到的另一件事是，當你在safari上遇到橡皮條紋時（我的猜測是負值），會發生「chopped/weirdness」。這可能是你想要看的東西。

祝你好運！

來源

2014-06-11 07:36:16 Jack

感謝傑克！什麼答案，非常好。它確實幫助了很多，但是你對Safari中的橡皮筋是正確的。我確實提供了你所建議的更新，並且性能更好，但我無法解決橡皮筋問題。你能幫我解決嗎？ –

我還沒有檢查過我的答案與Jack的比較，但我認爲問題在於Safari試圖非常節能。因此，除非需要硬件加速，否則會猶豫不決。人們用來強制硬件加速的一個常見技巧是將 -webkit-transform: translate3d(0, 0, 0); 放入正在移動的div的css中。我嘗試了內容類，它似乎更好一點。您也可以嘗試將其應用於其他圖層。

編輯：我將它應用到左側和右側的文本持有者divs，並且頁面看起來與Chrome現在一樣流暢。

來源

2014-06-11 07:43:07

+ Upvote - 這是一個很好的觀點凱文（我實際上編輯我的答案，包括這一點以及:) - 看起來像Dominik可以做多種事情來提高整體表現 - 但這絕對是一個巨大的！ – Jack

謝謝，我喜歡你關於DOM位置：'相對位置'迴流的觀點。我不知道。 –

謝謝，這是一個很大的改進滾動。我提高了你的答案，但是我不能選擇你的答案，因爲傑克正在用橡皮筋捲動Safari瀏覽器，而這正是滾動的最後一個問題。 –

只是草草記下來，因爲我這今天碰上了一個溢流自動元素：

解決的辦法是此規則添加到任何元素滾動條顯示出來的：

-webkit-overflow-scrolling: touch;

來源

2017-12-19 21:37:34

Safari中的雜亂滾動

回答

相關問題