在帶有大背景圖像的鉻中滾動滾動

Question

我創建了一個網頁，並且它有7個使用background-size: cover;的巨大背景圖像的六個部分。它可以在除Chrome瀏覽器（所有版本/所有平臺）以外的所有瀏覽器中正常運行。當我嘗試在谷歌瀏覽器中滾動頁面或點擊鏈接（他們也使用$ .scrollTo滾動頁面）時，頁面會變得波濤洶涌，並且緩慢滾動並使用100％的CPU。

我已經上傳了頁面，以便測試它：http://baaemail.com/beta（我將在稍後刪除頁面）。即使IE9/10是好的，但鉻變得波濤洶涌。

頁面上有幾個「滾動」事件綁定到它，我試圖完全禁用JavaScript，但它並沒有得到更好，所以它不是從滾動事件。

我使用background-size: cover，因爲它形狀酷似我希望它的照片，我想要的形象是固定的，這就是爲什麼我不能用其他方法，如使用img標籤，而不是背景。

我該怎麼辦？ 謝謝。

Answer 1

我爲自己找到的一個類似行爲網站的解決方案是爲包含巨大背景圖像的div添加background-repeat:no-repeat css屬性。

您還可以檢查是否有重複的body或html的背景圖像，對我來說，最大的問題是重複的圖案圖像，谷歌瀏覽器的滾動性能顯着干擾。

另外，如果您在這些「幻燈片」上使用CSS轉換，則應檢查這些轉換未分配給「全部」。如果您只是爲「左」屬性進行過渡，則沒有爲「全部」分配它的要點。

我不確定這是否會幫助你，但壓縮圖像和腳本總是一個好習慣。

這東西爲我做了詭計。希望能幫助到你。