변환 : iOS 8의 원근감 (#) 모바일 사파리 글리치 및 요소 숨기기

Question

프로젝트에 animate.css를 사용하고 iOS8 모바일 사파리에서 주요로드 블록을 기록했습니다.

원근법을 사용하는 애니메이션이 작동하지 않습니다. 이는 known issue으로 식별되었지만 솔루션이 제공되지 않았습니다.

참조 용으로 아래의 특정 CSS 코드가 포함되었습니다.

이 문제에 관해서는 아무 것도 발견하지 못했기 때문에 큰 도움이되었습니다.

@-webkit-keyframes flipInX { 
    0% { 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 
    -webkit-transition-timing-function: ease-in; 
    transition-timing-function: ease-in; 
    opacity: 0; 
    } 

    40% { 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 
    -webkit-transition-timing-function: ease-in; 
    transition-timing-function: ease-in; 
    } 

    60% { 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 
    opacity: 1; 
    } 

    80% { 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 
    } 

    100% { 
    -webkit-transform: perspective(400px); 
    transform: perspective(400px); 
    } 
} 

@keyframes flipInX { 
    0% { 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 
    -webkit-transition-timing-function: ease-in; 
    transition-timing-function: ease-in; 
    opacity: 0; 
    } 

    40% { 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 
    -webkit-transition-timing-function: ease-in; 
    transition-timing-function: ease-in; 
    } 

    60% { 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 
    opacity: 1; 
    } 

    80% { 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 
    } 

    100% { 
    -webkit-transform: perspective(400px); 
    -ms-transform: perspective(400px); 
    transform: perspective(400px); 
    } 
} 

.flipInX { 
    -webkit-backface-visibility: visible !important; 
    -ms-backface-visibility: visible !important; 
    backface-visibility: visible !important; 
    -webkit-animation-name: flipInX; 
    animation-name: flipInX; 
} 

Answer 1

애니메이션에서는 변경되지 않으므로 변환 대신 속성을 사용해보십시오.

-webkit-perspective: 400px; 
perspective: 400px; 

그렇게 키 프레임에서 제거 및 스타일 규칙에 넣어 :

0% { 
    -webkit-transform: rotate3d(1, 0, 0, 90deg); 
    transform: rotate3d(1, 0, 0, 90deg); 
    -webkit-transition-timing-function: ease-in; 
    transition-timing-function: ease-in; 
    opacity: 0; 
    } 

.flipInX { 
    -webkit-backface-visibility: visible !important; 
    -ms-backface-visibility: visible !important; 
    backface-visibility: visible !important; 
    -webkit-animation-name: flipInX; 
    animation-name: flipInX; 
    -webkit-perspective: 400px; 
    perspective: 400px; 
} 

편집 :

캔트 테스트를,하지만 난 벽에 스파게티를 던지는 유지할 수 있습니다. rotate3d를 동등한 것으로 변경해보십시오.

0% { 
    -webkit-transform: rotateY(90deg); 
    transform: rotateY(90deg); 
    -webkit-transition-timing-function: ease-in; 
    transition-timing-function: ease-in; 
    opacity: 0; 
    }