-webkit translate3d 큰 요소가있는 스터 터

Question

나는 -webkit-transform: translate3d(x,y,z)을 사용하여 요소에 애니메이션을 적용하고 입체적인 Beizer 타이밍 함수와 iPhone의 터치 이벤트를 조합하여 사용자 정의 scrollmethod 유형을 만듭니다.

요소 (이 경우 페이지 div)가 특정 크기보다 큰 경우 문제가 발생합니다. 애니메이션이 더듬 거리며 (요소가 0.5 초 동안 멈 춥니 다). 너비가 320px이고 높이가 1000px 인 경우이 모든 작업이 정상적으로 작동하지만 높이를 2000px로 설정하면 더듬 거리는 소리가납니다. 그것이 처음에는 거의 한 번 딱딱 거리는 것을주의하십시오. 거의로드하는 것과 비슷합니다.

알려진 해결 방법이 있습니까?

Answer 1

두 가지 가능한 대안.

먼저 다른 CSS 속성, 즉 위치 (위쪽, 왼쪽, 오른쪽, 아래쪽) 및 불투명도를 해제하십시오. 특히 애니메이션을 적용하는 경우 이들을 혼합하면 성능 문제가 발생할 수 있습니다.

최대한 빨리 끄고 문제가 해결되었는지 확인해 볼 수 있습니다. 그렇다면 문제 속성이 발견 될 때까지 하나씩 차례대로 되돌립니다.

두 번째로, iframe 내에 콘텐츠를 포장하십시오. iframe이보기를 채우기 위해 설정 되더라도 매우 큰 이미지가 포함되어있을 때 상당한 성능 향상을 제공 할 수 있습니다.