프론트엔드7분
iOS 사파리 탭이 반복해서 죽을 때: 폰 시스템 로그로 WebContent 메모리 읽기
아이폰에서 랜딩 페이지 하나를 가로로 눕혀 스크롤하면 탭이 죽었습니다. 사파리는 「문제가 반복적으로 발생했습니다」를 띄웠고, 크롬은 빈 화면을 남겼습니다. 세로로는 멀쩡했고, 가로에서도 가끔 죽었으며, 크게 확대하면 더 잘 죽었습니다. 서버는 200을 돌려주고 있었습니다.
아이폰에서 랜딩 페이지 하나를 가로로 눕혀 스크롤하면 탭이 죽었습니다. 사파리는 「문제가 반복적으로 발생했습니다」를 띄웠고, 크롬은 빈 화면을 남겼습니다. 세로로는 멀쩡했고, 가로에서도 가끔 죽었으며, 크게 확대하면 더 잘 죽었습니다. 서버는 200을 돌려주고 있었습니다.
같은 날 확인된 세 증상은 원인이 서로 달랐으며, 모두 해당 테스트 환경에서 데스크톱 Chrome과 다르게 나타난 WebKit 관련 동작이었습니다.
모바일에서 화면을 옆으로 밀었더니 페이지가 밀리고 오른쪽에 빈 여백이 보인다면, 어떤 요소가 뷰포트보다 오른쪽으로 삐져나가 있다는 뜻입니다. 흔한 문제인데 범인을 찾기가 은근히 어렵습니다. 눈에 보이는 요소가 아닌 경우가 많기 때문입니다.
개발하면서 가장 당황스러운 상황 중 하나가 내 브라우저에서는 되는데 다른 기기에서만 안 되는 경우입니다. 특히 화면이 아예 하얗게 나오면 어디서부터 봐야 할지 막막합니다. 콘솔도 못 보고 에러 메시지도 없습니다.
상단 고정 헤더는 거의 모든 사이트가 쓰는 패턴입니다. position: fixed 한 줄이면 끝나는 것처럼 보이고, 데스크톱에서는 실제로 그렇습니다. 그런데 iOS 사파리에서는 이 헤더가 스크롤 도중 통째로 사라지거나, 위쪽이 몇 픽셀 잘려 보이는 일이 생깁니다.