Thay đổi tập tin đính kèm nền trong khi di chuyển gây ra trục trặc đồ họa trong WebKit

Question

Tôi gặp sự cố sau.

tôi đã xây dựng một trang web với cấu trúc này:

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

Content có một bộ background-image để duy trì cố định ở phía dưới. Bây giờ, khi bạn cuộn xuống, hình ảnh sẽ cuộn sau chân trang. Để ngăn chặn điều đó, tôi đã viết một tập lệnh ngắn để tự động đặt tệp đính kèm để cuộn khi chân trang được đưa vào xem:

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

Điều này giải quyết được vấn đề của tôi khá tốt và hoạt động ở hầu hết các trình duyệt. IE là không có vấn đề, thời gian này Chrome (WebKit nói chung, có vẻ như) cho tôi vấn đề. Khi cuộn xuống dưới cùng, thay đổi sẽ hoạt động chính xác. Khi cuộn lên và xuống một chút, nền bắt đầu hiển thị ổn định đồ họa. Khi chân trang trở về phía dưới, nó trông bình thường trở lại.

Ai đó có thể giúp tôi không?

Answer 1

Tôi gặp sự cố tương tự trên một trang web. Nhưng tôi đã tìm ra giải pháp.

Cố gắng sử dụng -webkit-transform thuộc tính css.

đang xem dưới đây

#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. Xin lỗi vì tiếng Anh của tôi.