스크롤하는 동안 백그라운드 첨부 파일을 변경하면 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

한 웹 사이트에서 비슷한 문제가있었습니다. 하지만 그 해결책을 찾았습니다.

-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 아래

참조 코드입니다. 내 영어로 미안해.