Android 브라우저에서 CSS 오버플로 및 절대 위치 지정 문제가 발생했습니다.

Question

Google은 JQuery Mobile, PhoneGap 및 ASP.net MVC를 사용하여 모바일 웹 앱을 구축했습니다. 앱은 브라우저와 상관없이 iOS 및 Android 기기에서 실행되도록 타겟팅됩니다. 아래 나열된 기기로 앱을 테스트했으며 문제없이 정상적으로 작동하는 것으로 보입니다.

iOS 5 - iPad, iPhone.

안드로이드 4.1.2 - 아수스 변압기 탭

그러나 테스트 - 구글 넥서스 7, 삼성 갤럭시 S3, 삼성 갤럭시 노트 2, 삼성 갤럭시 탭 2

안드로이드 4.0.3안드로이드 주식 브라우저삼성 갤럭시 노트 800 4.1.2, 우리는 매우 이상한 문제가 발생했습니다. css 속성 '오버 플로우 : 자동'이있는 div에있는 요소 (자식 div)는 스크롤이 사용되는 동안 터치 이벤트에 응답하지 않습니다. 여기서 주목해야 할 점은이 div를 포함하는 상위 div는 절대적으로 '위치 : abolute'입니다. 언젠가 인터넷을 통해 조사한 결과 절대 위치와 오버 플로우 속성의 조합으로 인해 Android 브라우저에서 일부 문제가 발생할 수 있다는 것을 발견했습니다.

레이아웃을 완전히 다시 설계 할 때 절대 위치를 제거 할 수 없으며 릴리즈가 며칠 남았습니다. 그렇다면이 문제를 빨리 해결할 수있는 사람이 있습니까?

Answer 1

"iScroll"이라는 자바 스크립트 라이브러리를 사용할 수 있습니다. 대부분의 Android 기기에서 작동하며 구현하기도 어렵지 않습니다. div 요소 아래에 var scrollDiv = new iScroll('divId');으로 작성하십시오. 여기에 프로젝트 페이지가 있습니다 : http://cubiq.org/iscroll-4

Answer 2

나는 왜 그것이 효과가 있었는지 모르지만 -webkit-backface-visibility : hidden을 추가했습니다. 귀하의 스타일에 맞게 수정 해 드리겠습니다.

Answer 3

문제는 overflow: auto은 /는 안드로이드 브라우저에서 알려진 문제입니다. 2009 년에보고 된 문제가 (see here)입니다. 나는 그들이 그 동안 그것을 풀 었다고 생각했다. 그것은 구식 표시입니다. 그러나 사람들은 여전히 ​​효과가 없다고 불평하고 있습니다. 그렇다면 Chrome이 이제 표준 Android 브라우저가되었으므로 Chrome을 더 이상 고치지 않을 것으로 판단됩니다.

Answer 4

대신 overflow-x 및/또는 overflow-y 속성을 사용하십시오. 스크롤은 터치 장치에 숨겨져 있기 때문에

EG

overflow-y: scroll; /* allow vertical scrolling */ 
-webkit-overflow-scrolling: touch; /* optional momentum scrolling */ 

또한, 당신은 :scroll보다는 :auto 사용할 수 있습니다. 똑같지 만 똑같은 버그를 겪지 않을 수도 있습니다.

Answer 5

절대적으로 배치 된 컨테이너 내부의 요소를 새 div에 배치하고 상대적으로 배치하는 방법은 어떻습니까?

<div class="absolutelyPositionedParent"> 
    <div class="relativelyPositionedElement"></div> 
</div> 

<style>.relativelyPositionedElement{position:relative;overflow:auto;}</style>