iOS 하드웨어 가속 슬라이드 다운

Question

오늘 너희들에게 좋은 질문이있어. 휴대 기기 용 드롭 다운 슬라이더 (특히 iOS 모바일 사파리) 작업 중입니다. 나는 그걸 가지고 아주 멀지 만 벽돌 벽에 부딪쳤다. 내가 겪어 본 문제는 (높이/위치/마진) 전환이 모바일 장치에서 매우 부드럽지 않다는 것입니다. 그래서 저는 휴대 전화에서 부드럽고 매끄러운 변환을 사용하도록 전환했습니다.

아동용 컨테이너가있는 컨테이너를 사용합니다. 기사는 y 축에서 -120 %로 변환되어 컨테이너 오버플로에 의해 숨겨집니다. 탭하면 기사가 원래 위치로 돌아갑니다. 기사가

내 문제는 그 다음이다, 내가 어떻게이 문제를 해결할 수

:(슬라이더를 아래로 내 드롭 사이에 공백을 일으키는 원인이 -120 %를 변환 할 때

이 큰 떨어져 양식 한 가지를 작동, 컨테이너는 붕괴하지 않는 이유는 무엇입니까?

너희들이 도와 수 있기를 바랍니다

Answer 1

사용 translate3d 하드웨어 가속 트리거 :!이 잘 KN은

-webkit-transform: translate3d(0,-200%,0); 
-webkit-transform: translate3d(0,0,0); 

을 하드웨어 가속 CSS3 변환을 사용하도록 iOS 기기를 강요하는 자체 트릭 나는 당신을 위해 바이올린을 업데이트했다. (노트 : 데스크톱 브라우저 테스트를위한 'hover'이벤트에 묶였다.)

http://jsfiddle.net/CeyJq/4/