2012-08-07 4 views
6

iPad 및 iPad에서만 Safari의 사이트가 다운됩니다. 나는 헤더에 css3 애니메이션을 사용하여 큰 그림 (4800 x 374px, 단 336kb)을 움직입니다. 약 10 초 후에 Safari가 충돌합니다.CSS 애니메이션이 iPad에서 Safari와 충돌합니다

당신은 http://bakabaka.nl/preview/leuk/

에서 사이트가 I이 충돌을 방지하고, 만약 그렇다면, 어떻게 볼 수 있습니까? 애니메이션을 부드럽게 실행할 수 있습니까? 지금은 매우 들쭉날쭉하다. ...

+0

내가이 사이트를 실행하는 데 WordPress를 사용하고 있다는 것을 추가하는 것이 유용 할 수 있지만 실제로 어떻게 영향을 미칠지는 알 수 없습니다. – Bakabaka

답변

4

이것은 어둠의 발사 다. 그러나 아마 그만한 가치가 있을지도 모른다. 내가 시도 할 것입니다 무엇

는 하드웨어 가속을 사용하기 때문에 iOS에서 3 차원 애니메이션을 사용하는 것입니다

-webkit-transform: translate3d(X,Y,Z); 

을 자세한 내용은 여기를 참조하십시오 : '3D Transform Functions'

또한 매우 몇 가지 문제가 발생할 수 있습니다 iOS의 큰 이미지. 어쩌면 그것들을 조각으로 자르는 더 좋은 해결책 일 것입니다. 자세히 알아보기 : "Know iOS Resource Limits"

+0

해보겠습니다. 고마워요! – Bakabaka

+0

매력처럼 작동했습니다. 웹킷 (OS와는 독립적 인)을 위해 translateX 애니메이션을 사용하여 끝내고 문제를 해결했습니다. 감사! – Bakabaka

+0

내 아이폰에서 꽤 매끄럽게 보입니다. 나는 기쁘다. :) – insertusernamehere

2

나는 비슷한 것을 경험하고있었습니다. 벽에 머리를 대고있는 다른 사용자에게는 데스크톱과 iOS에서 Safari가 충돌했습니다. 그것 정말는 그 ::window-inactive 셀렉터를 좋아하지 않아.

::-webkit-scrollbar-thumb:window-inactive { 
    background: #f2f2f2; 
} 
관련 문제