स्क्रॉलिंग के दौरान पृष्ठभूमि-अनुलग्नक बदलना वेबकिट

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

यह बहुत अच्छी तरह से मेरी समस्या का हल है और लगभग सभी ब्राउज़रों में काम करता है। आईई कोई समस्या नहीं है, इस बार क्रोम (सामान्य रूप से वेबकिट, ऐसा लगता है) मुझे समस्याएं देता है। नीचे स्क्रॉल करते समय, परिवर्तन सही ढंग से काम करता है। बैक अप और डाउन स्क्रॉल करते समय, पृष्ठभूमि ग्राफिकल ग्लिच दिखाती है। जब पाद लेख नीचे लौटता है, तो यह फिर से सामान्य दिखता है।

क्या कोई मेरी मदद कर सकता है?

Answer 1

मुझे एक वेबसाइट पर एक ही समस्या थी। लेकिन मुझे समाधान मिला।

-webkit-transform सीएसएस संपत्ति का उपयोग करने का प्रयास करें। नीचे

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

पुनश्च

कोड देखें। मेरी अंग्रेजी के लिए खेद है।