WebKit

Question

'de kaydırma yaparken arka plan ekinin değiştirilmesi, aşağıdaki sorunla karşılaşıyorum.

Ben bu yapı ile bir web sitesi inşa:

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

İçerik altında sabit kalan bir arka plan görüntüsü setine sahiptir. Şimdi, aşağı kaydırdığınızda, resim altbilginin arkasında kayar. Bunu önlemek için, otomatik olarak altbilgi görüntülemeye geldiğinde ilerlemek için eki ayarlamak için kısa bir senaryo yazdı:

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

Bu oldukça iyi benim sorunu çözer ve neredeyse tüm tarayıcılarda çalışır. IE sorun değil, bu sefer Chrome (WebKit genel olarak görünüyor) bana sorun veriyor. Aşağıya doğru kaydırıldığında, değişiklik doğru şekilde çalışır. Geriye ve aşağıya doğru kaydırırken, arka plan grafiksel hataları göstermeye başlar. Altbilgi aşağıya döndüğünde, tekrar normal görünüyor.

Biri bana yardım edebilir mi?

Answer 1

Bir web sitesinde benzer bir sorun yaşadım. Ama çözümü buldum.

-webkit-transform css özelliği kullanmayı deneyin.

#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 altında

bakınız kodu. İngilizcem için üzgünüm.