CSS 애니메이션 변형 : iPad의 성능 저하 번역

Question

모바일 Safari/(iPad 및 iPhone)에서 볼 때 내 포트폴리오 사이트 http://robthwaites.com에서 전환 애니메이션의 느린/janky 렌더링 문제를 해결하기가 어렵습니다.

내 홈페이지 미리보기 이미지 중 하나를 클릭하면 .presentation 콘텐츠가 전환되면 큰 div가 번역됩니다 (div.workdoor-top 및 div.workdoor-bottom, 각각 큰 삼각형 회색 배경 SVG). 45도 각도의 '와이프'효과를 만듭니다.

전환은 jQuery. addClass()로 처리됩니다 (div에 .hidden 클래스 추가). 전환은 모든 데스크탑 브라우저에서 매끄럽습니다.

나는이 기사의 팁을 따라 갔다. 내 변환을 transform : translateX 만 유지한다고 생각한다. http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

이 전환에서 많은 Recalculate Style이 발생하는 Chrome Dev Tools Timeline을 사용하여 문제가 발생한 곳을 관찰하려고 시도했으나 어디에서 문제가 발생했는지 그리고 어떻게 해결할 수 있는지 잘 모르겠습니다.

PNG에 대한 SVG 배경 이미지를 변경해도 성능 향상에 도움이되지 않았습니다.

죄송합니다. 더 명확하게 말할 수는 없지만 (a) Chrome 개발 도구 타임 라인 (또는 다른 개발 도구)에서 문제를 타겟팅 할 수 있는지 알고 싶습니다. (b) 해결 방법을 찾으십시오. 그래서 이것은 모바일 장치에서 부드럽게 움직입니다.

전체 사이트는 CSS입니다. DIV는 아래의 전환과 함께 문제가됩니다. 이 추가

.workdoor-top { 
    position: absolute; 
    top: 0%; 
    right: 0%; 
    z-index: 30; 
    width: 2000px; 
    height: 2000px; 
    background: url(../portfolio-door-top.svg) top right no-repeat; 
    -webkit-background-size: cover; 
    background-size: cover; 
    pointer-events: none; 
    -webkit-transition: -webkit-transform 0s ease; 
    transition: transform 0s ease; 
    -webkit-transform: translate(0px, 0); 
    -ms-transform: translate(0px, 0); 
    transform: translate(0px, 0); 
} 
.workdoor-top.hidden { 
    -webkit-transform: translate(2000px, 0); 
    -ms-transform: translate(2000px, 0); 
    transform: translate(2000px, 0); 
    -webkit-transition: -webkit-transform 1s ease; 
    transition: transform 1s ease; 
} 
.workdoor-bottom { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    z-index: 30; 
    width: 2000px; 
    height: 2000px; 
    background: url(../portfolio-door-bottom.svg) bottom left no-repeat; 
    -webkit-background-size: cover; 
    background-size: cover; 
    pointer-events: none; 
    -webkit-transition: -webkit-transform 1s ease; 
    transition: transform 1s ease; 
    -webkit-transform: translate(-15px, 0); 
    -ms-transform: translate(-15px, 0); 
    transform: translate(-15px, 0); 
} 
.workdoor-bottom.hidden { 
    -webkit-transform: translate(-2000px, 0); 
    -ms-transform: translate(-2000px, 0); 
    transform: translate(-2000px, 0); 
    -webkit-transition: -webkit-transform 0s ease; 
    transition: transform 0s ease; 
} 

Answer 1

보십시오

.workdoor-top, .workdoor-top.hidden, .workdoor-bottom, .workdoor-bottom.hidden { 
    -webkit-transform: translateZ(0); 
} 

하드웨어 가속을 사용하는 장치를 강제한다.

는 또한 이러한 속성 중 하나는 작동합니다 : http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/