スクロール中に背景アタッチメントを変更すると、WebKitでグラフィカルグリッチが発生する

Question

次の問題があります。

私はこのような構造を持つウェブサイトを構築しました：

<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と思われます）が私に問題をもたらします。下にスクロールすると、変更が正しく機能します。少し上下にスクロールすると、背景にグラフィカルグリッチが表示されます。フッタが下に戻ると、再び正常に見えます。

誰かが私を助けることができますか？

Answer 1

私は1つのウェブサイトで同様の問題を抱えていました。しかし、私は解決策を見つけました。

-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); 
} 

PS以下

を参照してくださいコード。私の英語のために申し訳ありません。