iOS7 및 Safari 7의 플립 애니메이션에 이상한 렌더링

Question

간단한 CSS 애니메이션을 사용하는 웹 기반 발행물을 만들고 있습니다. '뒤로'부터 시작해서 페이지가로드 될 때 '앞'을 표시 할 때까지 재생되는 제목이있는 서클입니다. 애니메이션은 Chrome 및 Safari 6에서 정상적으로 재생되지만 기기에서 테스트 할 때 서클이 사라지고 영웅 이미지 위에 겹쳐지는 이상한 깜박임과 공백이 있습니다.

나에게 공유 할 웹 미리보기 나 문제의 gif (미안)를 제공 할 수 없지만 더 많은 정보를 제공해야하는지 알려주세요.

편집 : 렌더링 문제를 '해결'하지만 이미지 위에 회전 할 때 깜박입니다. 어떤 아이디어? 페이지

이미지는 내가 만들려고 해요 :

http://i.stack.imgur.com/TsxpZ.jpg

HTML 구조 다음 CSS의

<div class="circle-feat flip-circle"> 
    <div class="circle-title"> 
     <h1 class="book-align-center Title-White" data-name="title">COLD IN JULY</h1> 
    </div> 
</div> 

발췌문 : 사전에

.circle-feat { 
    position: relative; 
    width: 84%; 
    height: 0; 
    padding: 42% 0; 
    margin: 1em auto; 
    border-radius: 50%; 
    background: rgb(0,0,0); 
    z-index: 10; 
} 

.circle-title { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    transform-style: preserve-3d; 
} 

.circle-title:before { 
    content: ''; 
    vertical-align: middle; 
    display: inline-block; 
    width: 0; 
    height: 100%; 
} 

.circle-title h1 { 
    vertical-align: middle; 
    display: inline-block; 
    padding: 20px; 
} 

.flip-circle { 
    transform-style: preserve-3d; 
    -webkit-backface-visibility: visible; 
    -webkit-animation-name: flip; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-duration: 2.2s; 
    -webkit-animation-delay: 1.5s; 
} 

@-webkit-keyframes flip { 
    0% { 
    -webkit-transform: perspective(800) translateZ(0) rotateY(-180deg) scale(1); 
    -webkit-animation-timing-function: ease-out; 
    } 

    100% { 
    -webkit-transform: perspective(800) translateZ(0) rotateY(0deg) scale(1); 
    -webkit-animation-timing-function: ease-in; 
    } 
} 

감사합니다 !

Answer 1

저는 열렬한 Apple 사용자가 아닙니다. (부적절한 경우에는 유감입니다.) 귀하의 문제는 접두사와 관련이있을 수 있습니다. 사파리의 새 버전은 변환에 -webkit- 접두사가 필요하지 않지만 일부 구버전은 ... 변환 및 전환에 모든 접두어를 추가하여 더 잘 작동하는지 확인해보십시오.

Answer 2

좋아요. 대부분이 질문은 내 답변에 해당하므로 답변에 넣어야합니다. 필자는 기사에 첨부 된 배경색 규칙을 제거하여 렌더링 문제를 해결할 수있었습니다. Safari iOS7이 거기에 대처할 수 없었을 것입니다.

Answer 3

사용중인 iPhone에서만 문제가 발생할 수 있는지 궁금합니다 (RAM 부족, 너무 많은 앱 또는 브라우저 구성). 친구의 iOS7 기기를 사용해 보시고이 경우가 맞는지 확인해보십시오.

내 경험에 따르면 휴대 기기는 웹에서 CSS3 애니메이션을 잘 처리하지 못하고, Apple은 iOS7에서 일부 기능을 축소했을 것입니다. 이 때문에 복잡한 애니메이션이없는이 발행물의 모바일 버전을 만들 수 있습니다. This article on CSS-Tricks은 대단합니다 - jQuery 또는 순수한 자바 스크립트를 사용하여 별도의 스타일 시트를 적용하여 장치의 크기를 실시간으로 감지하는 방법을 보여줍니다. 나는 이것이 실제로 해결책이 아니라는 것을 안다.하지만 애니메이션에서 배경색을 제거하면 모양이 나빠진다는 것을 압니다. 이것이 유일한 옵션 일 수 있습니다. 이 문제가 해결되면 알려주세요!