🪜 iOS 브라우저에서 스크롤과 좌표 계산 API를 함께 썼더니 생긴 일

안녕하세요, 구독자 님!
뉴스레터를 구독해신 분들께 매번 감사드립니다. 🙇‍♂️

프론트엔드 개발자라면 누구나 크로스 브라우징 이슈를 겪게 마련입니다. 그 중에서도 iOS 환경 대응은 악명이 높기로 유명하죠.

최근에 회사에서 QA 업무를 하다가 이러한 iOS 이슈를 여러 개 처리하게 됐는데, 그 중에서도 정말 황당하고 어이없는 케이스가 있어서 이렇게 글로 정리하게 되었습니다. (이 억울함을 나만 알 수는 없다!)

제가 담당한 이슈는 iOS Safari 브라우저에서 댓글 입력 중 멘션 기능을 사용할 때 발생했습니다. 사용자가 `@` 를 입력하면 멘션 레이어가 표시되는데, iOS에서만 이 레이어가 화면을 뚫고 나가버리는 것이 문제였죠.

알고 보니 모바일 브라우저에서 스크롤 위치를 고정하기 위해 사용하던 API와 멘션 레이어 위치를 계산하기 위한 API가 연달아 사용되었더니 좌표 계산이 정상적으로 동작하지 않는 것이 문제더라구요.

그런데 그 원인과 해결책을 알고 나니 참 어이없고 황당하고… 마음이 참 그렇더라구요. 😂 혹시나 했는데 역시나 여서 WebKit 개발자한테 좀 섭섭하다는 감정도 들었네요.

아무튼 오늘은 해당 버그를 소개하고 그 해결책까지 알아보는 시간을 가져보려고 합니다.