IOS - 웹킷 - 오버플로 - 스크롤이 잘못된 축에서 스크롤되거나 전혀 표시되지 않음

Question

IOS 용 모바일 앱을 html5로 제작하고 있습니다. 네이티브 관성 스크롤을 얻으려면 "-webkit-overflow-scrolling : touch"를 사용하고 있지만 매우 버그가 있습니다. 스크롤이 끝날 때까지 렌더링되지 않는 콘텐츠 문제를 해결했지만 계속되는 버그가 하나 있습니다.

위아래로 스크롤하려고하면 아무 일도 일어나지 않지만 가로로 스크롤하려고하면 콘텐츠가 스크롤됩니다 수직 축은 (축으로부터 90도 벗어남). 내 앱을 탐색하여 페이지로 돌아 오면 때때로 수정 될 것입니다. 또한 때로는 내용이 가득 차 있음에도 불구하고 전혀 스크롤하지 않습니다.

내가 봤던 것으로부터, 합의는 애플이이 버그를 알고 있고, 언제든지 그것을 고칠 의도가없는 것 같다. 누구든지 올바르게 작동하려면 -webkit-overflow-scrolling을 얻을 수있는 해결책을 찾았습니까?

Answer 1

나는 또한이 버그로 몇 달 동안 고민했습니다. 내가 찾은 가장 좋은 특성은 다음 페이지에서 Iframe을 가지고 있으며, 내용이 자바 스크립트에서 설정 될 때 그런 일이 있다고

https://bugs.webkit.org/show_bug.cgi?id=87391

. 현재 The Graphics Codex version 1.6의 해결 방법은 iScroll4를 사용하여 터치 스크롤을 사용하지 않고 페이지를 명시 적으로 스크롤하는 것입니다. Javascript는 단일 스레드이므로 애니메이션이나 백그라운드로드 컨텐츠를 수행하는 경우 속도가 느려질 수 있습니다.

Answer 2

동일한 문제가 발생했습니다 : 노드가 -webkit-overflow-scrolling: scroll을 사용하여 왼쪽/오른쪽 스크롤 제스처로 간헐적으로 위/아래로 스크롤합니다. 여기

내가 할 수있는 가능한 원인을 찾을 수있는 작업은 다음과 같습니다 그렇지 않으면 스크롤 노드의 부모에 적용 ( source)

visibility: hidden

• 은 iframe 어디서나 페이지에있는 볼 또는 (source)

그러나 이러한 상황은 내 웹 앱에 없었습니다. 나는 과 함께 ::after 유사 요소 인 투명 언더 레이를 추가하는 영리한 트릭을 사용하여 작성한 순수 CSS 모달 대화 상자 안에 스크롤 가능 <ul>을 가지고있었습니다.

가짜 요소에서 position: fixed을 제거하면 문제가 해결되었습니다. 물론 이것은 내 영리한 트릭을 쓸모 없게 만들었지 만,이 버그가이 상황에 의해 촉발 될 수 있다는 것을 배우는 것은 흥미 롭습니다.

장치 2012시오 3 아이폰 OS 5.1.1 (망막)

잘못된 코드 :

/* Underlay */ 
.dialog::after { 
    z-index: -1; 
    position: fixed; /* <--- This was the problem! */ 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 

    background-color: rgba(0,0,0,0.4); 

    content: ""; 
} 

TL; DR : 함유 요소는 고정 된 위치에서 의사 -이 있으면 요소를 제거하면 스크롤 문제가 해결 될 수 있습니다.

Answer 3

문제가 오래되었음을 알고 있지만 iOS 5에서 웹 사이트 작업을해야했습니다. 불행히도 iframe을 제거하거나 대체 할 수 없었습니다. 나는 iframe의 존재가 부드럽게 스크롤 할 수있는 요소 앞에 렌더링 된 경우에만 문제가 발생한다는 것을 알아 챘다.나중에 문서에 iframe을 추가하면 (-webkit-overflow-scroll : touch가있는 요소 뒤에) 문제가 해결됨 :