可怕的滯後使用視差效果

首先的時候，這裏是我的網站的鏈接，爲我即將對問題進行描述：可怕的滯後使用視差效果

http://themes.roussounelosweb.gr/cassiopeia/

在Firefox，IE 9，歌劇，Safari ，該網站看起來很完美，運行順利。問題在於Chrome和Android設備，其中滾動非常滯後，而使用視差效果的背景圖片則動畫不明確。

我懷疑問題在於背景大小：cover和background-attachment：我的圖像的固定屬性，但我還沒有找到解決此問題的方法。

您可以親眼看到它，並在上面的鏈接中獲得更好的想法。請幫忙;我正在完成這個項目的最後幾個步驟，而這個錯誤真的讓我失望。

section{ 

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
background-attachment:fixed; 
overflow:hidden; 
} 

section.section1{ 

background-image:url(../img/section1.jpg); 
background-repeat:no-repeat; 
color:#dedede; 
text-shadow:1px 1px 5px rgba(0,0,0,0.8); 
position:relative; 
padding:20px 0px; 
z-index:1; 
overflow:hidden; 
}

來源

2013-11-01 Νίκος Ρουσσουνέλος

真的很好皮！但也許這可能與皮膚的重量差不多有7MB，背景超過1兆？附：你的HEAD有一個DIV :-) – Robert

Paul Irish在YouTube上有一個很棒的視頻（http://www.youtube.com/watch?v=mSK70FwUz2A），用於調試基本相同的問題 - 可能值得一看。 –

Chrome上的視差性能問題是我通常不使用視差技術的主要原因。即使問題得到了成功解答並解決了這個問題，有人可以指出我爲什麼會發生這種情況只有conrome瀏覽器？根據OP的說法，在幾乎所有其他設備/瀏覽器上，網站運行順利（並且btw很棒的設計，很好的工作！），但在Chrome瀏覽器和Android中它只是變得不穩定。 – Gruber

我不相信你的問題是在CSS中，而是在JS中。

首先，我可以看到你使用nicescroll和parallax.js。這可能是兩個衝突 - 嘗試從JS中刪除nicescroll並檢查它是否更好。

其次，與開發商工具時間軸分析你的框架活動，你可以看到確切點的數據幀進行過濾：

Devtools timeline

你射擊33定時器，當你滾動。你也許可以嘗試調試一下你的代碼，從滾動事件中一次解除一個回調，並檢查哪個是有問題的。

UPDATE：

我認爲羅伯特這樣做是正確的意見：你的背景是重。由於它已經是一個龐大而耗費CPU資源的頁面，我猜想瀏覽器很難處理這些大元素的視差。嘗試縮小，壓縮並以較低的質量保存它們。

來源

2013-11-01 20:11:00 skz

禁用nicescroll並且大部分問題都消失了。所有這些日子都在搜索CSS，這是js有問題。非常感謝你的時間，非常感謝。 –

@ user2946214不錯！很高興我能幫上忙。 – skz

也使用underscore.js庫來限制某些事件，現在在所有設備/配置上模板運行得更順暢。 –

可怕的滯後使用視差效果

回答

相關問題