아이폰 스크롤 오류 - aipon seukeulol olyu

아이포니앙

아이폰, 아이패드, 터치 소모임입니다.

잡담 아이폰X 사용하면서 겪었던 터치, 스크롤 문제 및 해결후기. (긴글) 14

1

안녕하세요.

저는 아이폰X을 출시일부터 사용했습니다.

제 게시글을 보시면 아시겠지만 스크롤이 자동으로 올라가는 문제가 빈번히 발생했습니다.

사파리, 카톡, 메시지, 설정 등등 모든어플에서 발생했는데요..

이 증상은 스크롤을 아래로 내리면서 사용하다보면 상단터치(시계터치) 한것처럼 처음 끝까지

올라가버리는 현상이였습니다.

저는 이게 소프트웨어 버그나 어플이  꼬인줄 알고 DFU 초기화만 정말 수십번 했었고 

백업복원 없이 사용도 했으며 어플도 하나하나 깔면서 체크 해봤습니다. 

처음엔 괜찮더니 역시나 스크롤이 쭉 올라가버립니다.

이걸 확인하는 방법은 화면녹화 기능을 켜놓으면 폰 스스로 녹화정지를 시킵니다.

즉, 녹화될때 뜨는 노치화면의 빨간색부분이 자동으로 눌린다는겁니다.

터치패널에 의심을 하기 시작했죠.

이게 터치패널이라고 의심한게 설정중에 '터치하여 화면깨우기' 인가요

(언어를 영어로 해놔서..) 저걸 켜놨는데도 한번터치하면 화면이 안켜지고

꼭 두번 세번 터치해야 켜지는 현상도 있었습니다. 어쩔땐 또 한번에 잘 켜집니다.

전 강화유리 문제인줄 알고 생폰으로도 써보고 교체도 해보고 다 해봤는데

한번에 켜지질 않더군요.

전 계속 소프트웨어 문제이겠거니 해서 베타 피드백도 보내보고했지만 전혀 나아지질 않았고

화면녹화로 스크롤 올라가는거 잡았고 터치하여 화면깨우기 기능을 확인할땐 여자친구 폰으로

녹화했습니다. 

센터가 너무너무 멀어서 억지로 사용하고 있는데 이게 유령터치, 고스트터치를 보여줍니다.

사파리 들어갔는데 지멋대로 터치하고 뒤로가고 난리더군요. 얼른 녹화했습니다.

이건 정말 아니다 싶어서 센터로 갔습니다. 공장초기화 하고 갔습니다. 동영상은 아이패드로 가져갔구요.

그런데 이게 센터에선 또 멀쩡하네요. 동영상을 보여주니까 증상이 안보이면 안된답니다.

제가 외국에 거주중이지만 영어가 좀 짧아 더이상 대화가 안되더라구요. 억울하지만 가져가랍니다..

센터다녀오신분들은 아실거에요. 집에오는길에, 집에서 확인하니 이게 또 난리입니다..

동영상을 찍어도 안된다하고 여러 방법들을 며칠동안 또 고민해봤습니다.

메모장을 켜서 선 그리기를 해봤는데 선이 중간중간 끊깁니다.

간헐적으로 확인됩니다. 이걸 증명할 수 있을정도로 빈번하게 확인가능하더라구요.

공장초기화를 해도 바로 안나오다가 메모장에 그리고 지우고 그리고 지우고를

20번 정도 반복하니 또 나옵니다. 

바로 센터로 가져갔습니다.

이 증상을 증명해 보이니 미안하다고 정말 끔찍해보인다고. 바로 접수해준답니다.

이문제로 애플지원에 문의해보고 사진보내보고 다 해봐도 안되더라구요..

전 애플스토어가 있는 나라에 거주중이지만 애플스토어가 너무 멀어 한국과 같은 튜바, 동부 이런곳에 갔습니다.

3-5일정도 소요된다 했고 리퍼냐, 수리냐, 교환이냐 물어봤더니 수리일거같다하더군요.

5일되는날 연락받고 센터 방문했는데 리퍼, 수리도 아닌 교환이랍니다. 

애플케어플러스에 가입되어 있었지만 이거와 상관없이 새제품 교환해준답니다.

새걸 뜯더군요. 세팅하면서 물어봤는데 이문제는 증명해보이면 바로 교체해준답니다.

자기네도 왜 새걸주라고 오더가 떨어졌는지 모르겠는데 애플서비스리포트에 패널문제시 교체로 나와있답니다.

유령터치, 고스트터치, 스크롤문제, 패널문제 등으로 고생하시는 분들이 꽤 있는걸로 알고있습니다.

이건 버그가 아니라는걸 제가 경험으로 증명하고 싶었습니다. 이런 문제로 고생하시는 분들에게 조금이나마 도움이 

되었으면 합니다. 정말 스트레스거든요. 

1. 메모장을 켜세요. 가로화면으로 놓고 선을 쭉쭉 그어보세요.

줄이 그려지다 끊어지거나 사라질겁니다.

2. 화면녹화기능을 켜고 녹화해보세요. 스스로 정지됩니다.

위 방법은 계속 시도하셔야해요.. 

긴글 읽어주셔서 감사합니다. 정말 작은 도움이 되었으면해서 글을 올립니다.

유렁터치, 고스트터치, 스크롤 올라가는 문제 동영상이 있는데 올릴 수가 없네요. 

보고싶으신 분들은 메일주소 남겨주시면 보내드리겠습니다.


GIF 파일 다운로드

0 0 0 0

GIF 파일을 다운로드 받으려면
화면에 표시된 4자리 번호를 입력해주세요.

@yeonsik
안녕하세요~

확인이 좀 늦어져서 죄송합니다. 해당 이슈는 ios의 iframe 사용시 발생하는 innner scroll 이슈입니다. 이 이슈가 ios8때부터 존재했었는데; 아직까지 있네요;; 특히나 position:fixed 상태에서 빈번하게 발생하며, 페이지가 redraw가 되어야 되는 상황에서 이게 되지 않고 멈추는 현상으로 파악이 됩니다. (비슷한 현상으로 키보드 버그도 있었습니다)
현재 이 오류는 다른 스타일태그나 내부의 다른 로직으로 해결이 불가능하며 알려주신 사이트의 코드를 살짝 바꾸시면 됩니다.

알려주신 사이트의 코드를 보면 저희 가이드페이지 샘플중에 layer로 띄우기 예제를 이용하신것 같은데; 이전에도 그랬지만 레이어 모드의 경우 iOS에서는 그리 추천하진 않습니다. inner scroll 이슈가 상당히 자주 발생해서요; 그래서 가이듶페이지에 있는 "페이지에 끼워넣기"예제를 추천드립니다.

또한 알려주신 페이지처럼, 하나의 html 페이지 전체를 커버하는 그런 사이트에서는 페이지 끼워넣기 예제가 더 좋습니다.
페이지끼워넣기 예제와, 레이어 예제의 차이점은, 우편번호서비스가 삽입되는 외부DOM(태그의 id가 layer나 wrap으로 가진 외부 태그)의 사이즈를 직접적으로 변경시키느냐 아니냐의 차이입니다.
페이지에 끼워넣기 예제의 경우 onresize 콜백함수를 이용하여 외부DOM의 크기 자체를 늘려서, 애초에 우편번호서비스 안에 inner scroll이 발생하지 않게 하는것이 포인트입니다. 그럼 많은 버그로부터 자유로워지게 됩니다.

일단 알려주신 페이지에서
<div id="layer" style="display:block;position:fixed;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch;">
이 부분을
<div id="layer" style="display:block;z-index:1;"> 또는 <div id="layer">
이렇게 바꿔주세요. 즉 레이어모드에서 사용하는 position, webkit 옵션들은 필요 없습니다.

그리고 아래의 initLayerPosition함수의 내부를

function initLayerPosition(){
var width = (window.innerWidth || document.documentElement.clientWidth);
var height = (window.innerHeight || document.documentElement.clientHeight);
element_layer.style.width = width + 'px';
element_layer.style.height = height + 'px';
}

이와 같이 변경해주세요, 불필요한 사이즈 설정을 삭제하고 width,height만 초기에 변경하는 로직만 넣으시면 됩니다. 이 코드는 페이지가 첫 실행될때 한번만 실행되어 div의 크기를 맞추는 역할을 합니다

그리고 마지막으로 생성자 옵션으로
onresize: function (size) {
element_layer.style.height = size.height + 'px';
}

을 넣어서 우편번호서비스의 내부 사이즈가 변할때마다 wrapper(삽입되는 외부 DIV태그)의 height를 변경시킵니다.

그럼 우편번호 서비스가 가지고있는 height크기 만큼 외부 DOM의 크기가 변경되므로, inner scroll이 발생하지 않아,
여러 버그들로부터 자유로워지게 됩니다.

앞서 말씀드린 것처럼 해당 이슈는 OS 사파리의 렌더링 버그라, 현재 어떻게 처리하기가 힘들며 우회처리하여 회피하는 방법밖에 없음을 말씀드립니다.

확인 부탁드립니다.
(해당 API들은 가이드페이지에 설명이 되어 있으니 추가적으로 확인해 주시면 감사하겠습니다)

추가적으로 해당 이슈를 점검하던차에 resize이벤트 무한트리거 현상이 확인되어 해당 로직의 수정버전이 곧 배포될 예정입니다.
이에따라 검색하지 않은 첫페이지의 로고 하단이 하얗게 나올 수 있는데요 (우편번호서비스가 아닌 개발자분의 페이지의 색상이 보이는 것) 이땐
<style>
body {
background-color:#ececec;
}
</style>

이렇게 처리해 두면; 우편번호 서비스 뒷배경과 색상이 같아서 이질감이 작아질 것으로 생각됩니다.

한번 확인 부탁드립니다.