滾動時更改背景附件會導致WebKit中出現圖形故障

我建了一個網站，這樣的結構：

<section id="content"> 
... 
</section> 
<footer> 
... 
</footer>

內容有一個背景圖像設定爲保持固定在底部。現在，當您向下滾動時，圖像會在頁腳後面滾動。爲了防止這種情況，我寫了一個簡短的腳本來自動設置附件時頁腳映入眼簾滾動：

$(document).scroll(function() { 
    var curpos = $(window).scrollTop(); 
    var fooOffset = $('#foot').offset(); 
    var wh = $(window).height(); 

    if(curpos >= (fooOffset.top-wh) && fix == 0) { 
     $('#content').css('background-attachment','scroll'); 
     fix = 1; 
    } else if(curpos < (fooOffset.top-wh) && fix == 1){ 
     $('#content').css('background-attachment','fixed'); 
     fix = 0; 
    } 
});

這解決我的問題非常好，並工作在幾乎所有的瀏覽器。 IE是沒有問題的，這次Chrome（WebKit一般來說，看起來）給了我一些問題。當滾動到底部時，更改正常工作。當上下滾動一下，背景開始顯示圖形故障。當頁腳返回到底部時，它看起來再次正常。

有人可以幫我嗎？

來源

2012-03-15 Frank Adler

什麼是「修復」，你在哪裏申報？ – meeDamian 2012-04-25 18:03:20

我們需要您測試過的瀏覽器和操作系統版本，以及硬件規格，因爲現在瀏覽器通常會將GPU優化用於顯示更新。＆JSFiddle幫助:) – tomByrer 2012-04-27 09:06:10

我在一個網站上有類似的問題。但我找到了解決方案。

嘗試使用 -webkit-transform css屬性。下面

#mainBg { 
    background:#F1F3F4 url(img/background2.jpg) center top no-repeat scroll; 
    width:100%; 
} 

#mainBg.bottomFixed { 
    background:#F1F3F4 url(img/background2.jpg) center bottom no-repeat fixed; 
    -webkit-transform: rotate(0deg); 
}

見代碼。對不起我的英語不好。

來源

2012-05-03 10:01:16 Pelmen

滾動時更改背景附件會導致WebKit中出現圖形故障

回答

相關問題