"-webkit-overflow-scroll : touch"모바일에서 수직 스크롤링 문제 발생

Question

반응 형 모바일 웹 사이트를 만드는 중입니다. 내 휴대 전화에서 테스트 할 때 가로로 스크롤 할 수있는 항목을 지나서 세로로 스크롤 할 수없는 것으로 나타났습니다.

다음은 내가 말하는 의미의 예입니다 (휴대 전화에서 가로 스크롤을 볼 수는 없지만 제대로 작동한다는 것을 믿어서 죄송합니다). http://jsfiddle.net/tArEy/

가 그럼 난 다음 줄에서 주석 수직 스크롤 작동하도록 :

모바일 웹킷은 이 예제의 테이블 과거 스크롤 할 수없는 브라우저. 그러나 이로 인해 수평 스크롤이 고르지 않게되었습니다.

-webkit-overflow-scrolling: touch; 

모바일 웹킷 브라우저 할 수있는이 예에서 테이블 과거 스크롤,하지만 좀 더 glitchy입니다. http://jsfiddle.net/tArEy/1/

CSS 만 사용하여 문제를 해결하는 방법에 대한 아이디어가 있습니까?

데모는 브라우저에서 테스트해야합니다. (저는 Android에서 Chrome 브라우저를 실행하고 있으며, iPhone에도 동일한 문제가 있다고 가정합니다).

편집 : 그 라인이 불가능 세로로 스크롤 할 수 있습니다, 그러나

-webkit-overflow-scrolling: touch; 

:

그것은 수평으로 스크롤하면 모바일 웹킷 브라우저에서 무섭게 버그가 당신의 CSS에 다음 줄없이 밝혀 그래서 나는 일종의 정체 상태에있다. 다른 웹킷이 아닌 브라우저는 가로로 잘 스크롤됩니다.

편집 2 :

나는 아이폰 내 손에 얻었다. 오버플로 스크롤은 하드웨어 가속이며 완벽하게 작동합니다. 이건 크롬 for Android 문제인 것으로 보입니다.

Answer 1

이것은 Android 용 Chrome의 버그입니다. 최근 업그레이드에서 수정되었습니다.

Answer 2

이것은 문제의 원인이 될 수 있습니다. http://filamentgroup.github.com/Overthrow/ 오버플로 스크롤은 최신 휴대 전화에서만 지원됩니다. 내가 테스트 한 결과 최신 휴대폰에 안드로이드 2.x 및 ios4를 지원하는 약간의 스크롤링 문제가 있으면 울어 버릴 것입니다.

가로로 스크롤하는 경우 디자인을 다시 생각해 볼 수 있습니다.