큰 배경 이미지로 크롬을 고르지 않게 스크롤

Question

나는 웹 페이지를 만들었으며, background-size: cover;을 사용하여 거대한 배경 이미지가있는 여섯 개의 섹션이 있습니다. Google 크롬 (모든 버전/모든 플랫폼)을 제외한 모든 브라우저에서 정상적으로 작동합니다. Google 크롬에서 페이지를 스크롤하거나 해당 링크를 클릭하면 ($ .scrollTo를 사용하여 페이지를 스크롤 함) 페이지가 고르지 않고 뒤떨어져 서서히 스크롤하고 100 % CPU를 사용합니다.

테스트 할 수 있도록 페이지를 업로드했습니다 : http://baaemail.com/beta (나중에이 페이지를 삭제합니다). 심지어 IE9/10은 괜찮지 만 크롬이 고르지 않게됩니다.

페이지에 여러 "스크롤"이벤트가 바인딩되어 있고 자바 스크립트를 모두 사용하지 못하도록 시도했지만 스크롤 이벤트에서 더 좋아지지 않습니다.

나는 정확하게 사진을 모양 짓고 이미지가 고정되어 있기 때문에 배경 대신 img 태그를 사용하는 것과 같은 다른 방법을 사용할 수없는 이유 때문에 background-size: cover을 사용하고 있습니다.

어떻게해야합니까? 덕분에 .

Answer 1

유사한 문제가있는 웹 사이트에서 직접 발견 한 해결책은 거대한 배경 이미지가 포함 된 해당 div에 background-repeat:no-repeat CSS 속성을 추가하는 것이 었습니다.

body 또는 html의 배경 이미지가 반복되어 있는지 확인할 수도 있습니다. 큰 문제는 반복적 인 패턴 이미지로 인해 Google 크롬의 스크롤링 성능에 크게 영향을 미쳤습니다.

또한 "슬라이드"에서 CSS 전환을 사용하는 경우 "모두"로 할당되어 있지 않은지 확인해야합니다. "왼쪽"속성에 대해서만 전환이 발생하는 경우 "모든"항목에 할당 할 포인트가 없습니다.

혼자만해도 도움이되는지 확신 할 수 없지만 이미지와 스크립트를 압축하는 것이 좋습니다.

이 물건은 나에게 트릭을 만들었습니다. 희망이 도움이됩니다.