-webkit-mobile safari에서 스크롤 할 때 애니메이션이 중지됩니다.

모바일 웹 사이트에 CSS 로딩 애니메이션을 만들고 있습니다.-webkit-mobile safari에서 스크롤 할 때 애니메이션이 중지됩니다.

이

HTML :

이

<div class="loader"></div>

CSS : 모빌 사파리에 애니메이션을 볼 때

.loader { 
    background-color: rgba(0,0,0,0); 
    border: 6px solid rgba(0,0,0,0.75); 
    opacity: 0.5; 
    border-top: 6px solid rgba(0,0,0,0); 
    border-left: 6px solid rgba(0,0,0,0); 
    border-radius: 60px; 
    box-shadow: 0 0 5px rgba(0,0,0,0.5); 
    width: 60px; 
    height: 60px; 
    margin: 0 auto; 
    -moz-animation: spin 1s infinite linear; 
    -webkit-animation: spin 1s infinite linear; 
} 

    @-moz-keyframes spin { 
     0% { -moz-transform:rotate(0deg); } 
     100% { -moz-transform:rotate(360deg); } 
    } 

    @-webkit-keyframes spin { 
     0% { -webkit-transform:rotate(0deg); } 
     100% { -webkit-transform:rotate(360deg); } 
    }

, 애니메이션이 일시 중지 로더는 다음과 같은 HTML/CSS를 사용하여 잘 작동합니다 페이지가 스크롤되거나 터치되고 있습니다. 사용자가 페이지를 스크롤하는 경우에도 애니메이션을 계속 유지할 수있는 방법이 있습니까?

감사합니다.

출처

2012-11-16 FLomid

현재로서는 가능하지 않습니다. 이러한 부작용을 피하기 위해서는 독자적인 스크롤 구현 (또는 프레임 워크 사용)이 필요합니다. GPU 제어를 위해 네이티브 스크롤링과 CSS 애니메이션이 모두 경쟁 할 수 있기 때문에 더 많은 기술적 통찰력을 얻을 수 있다고 생각합니다. 둘 다 가질 수 없습니다.

출처

2012-11-16 20:08:25

GPU 제어 문제는 친숙한 것으로 들립니다. 인터넷 검색에서 동일한 문제가있는 다른 사람을 찾을 수 있었으며 "-webkit-transform-style : preserve-3d;"를 사용하여 언급했습니다. 문제를 해결할 것입니다. 나는 이것을 .loader 클래스의 규칙에 넣어서 시도했지만, 문제가 해결되지 않았다. – FLomid

preserve-3d의 마법 호출은 iOS6 이전에 안정적으로 작동하는 데 사용되었지만 iOS6은이 동작을 신뢰할 수 없게 변경했습니다. "그리고 거기에 울음과 이빨 씹는" –

@MichaelMullany [솔루션 1] (http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/) 다시 가능하게 iOS6의 하드웨어 가속. 스크롤하는 동안 내 회전 문제가 수정되었습니다. – Pwner

-webkit-mobile safari에서 스크롤 할 때 애니메이션이 중지됩니다.

답변

관련 문제