아이폰 브라우저에서 클릭을 두 번해야 동작하는 문제

특이한 이슈가 발생했습니다. 웹을 비롯해 안드로이드 폰에서는 정상적으로 클릭이 되는 페이지가 아이폰에서는 클릭을 두 번해야 동작하는 현상이 발생한 겁니다.

 

아이폰에서는 사파리 브라우저 뿐만 아니라 크롬 브라우저로 실행을 해도 동일한 현상이 발생했습니다.

이런저런 테스트를 하면서 결국 해결했는데 그 내용에 대해서 공유하고자 합니다.

 

해당 클릭 이슈는 a태그에서 발생했습니다. 처음엔 href 속성에 자바스크립트를 선언한게 문제인가 생각했고 onclick으로 스크립트를 옮겨 보고 jquery가 문제인가해서 javascript로 바꾸기도 하고 다른 스크립트들과 충돌이 나나해서 함수 이름도 바꿔보고 심지어는 그 이벤트말고는 모든 소스코드를 지워보기도 했습니다.

 

하지만 여전히 아이폰에서는 첫번째 터치시에는 이벤트가 발생하지 않고 두번째 클릭시에 발생했습니다.

 

그래서 li 태그로 onclick을 옮겨 보았습니다. 그러니 정상적으로 클릭이 발생합니다. 게다가 같은 페이지에 비슷한 형식의 a태그도 있었는데 그 부분에서는 별도의 수정없이 제대로 작동을 하는 것을 발견했습니다.

 

둘의 차이가 무엇인가 css 파일을 확인하던 중 차이가 :hover Selector라는 것을 알아냈습니다.

a태그에 자주 들어가는 :hover Selector가 있고 없고의 차이에 따라 아이폰에서 클릭 이벤트 동작이 차이가 났습니다.

 

혹시나 해서 해당 클래스에서 :hover Selector를 제외해봤더니 한 번에 정상적으로 클릭이 됐습니다.

 

안드로이드에서는 제대로 실행되지만 아이폰에서는 실행되지 않기 때문에 그 페이지가 모바일에서 보는 페이지라면 아예 :hover Selector 를 제외하고 아니라면 반응형일 경우 미디어 쿼리를 이용해서 모바일로 변환될 경우 :hover Selector를 대체할 수 있는 구조로 디자인을 하는 것이 적절할 것 같습니다.