Safari Mobile에서 클릭을 두 번 해야만 동작하는 문제

모바일 웹페이지를 퍼블리싱하다가 이슈가 발생하였습니다. 이슈 내용은 다른 브라우저의 경우 클릭이 잘되는데 유독 아이폰의 모바일 사파리에서는 처음 클릭이 동작하지 않는 점입니다...

결국 해결은 하였는데 문제의 원인 및 해결방법에 대하여 적어봅니다. 앞으로는 아이폰 사용자를 위해서 모바일 페이지 구현시 유의해야겠습니다.

# 아이폰 사파리(safari) 브라우저 클릭이슈 해결방법

먼저 자세한 증상 및 원인과 해결방법은 아래와 같습니다.

• 증상 : 클릭시 첫번째 클릭은 동작안함(두번째부터 동작함)
• 원인 : css의 허위클래스 :hover 선언시 문제발생으로 마우스 오버시 클릭하면 이벤트가 동작안함
• 디바이스 : 아이폰 safari 브라우저

결국 문제는 :hover를 사용하여 허위 엘리먼트 content를 추가하는 경우 아이폰에서는 한 번 더 클릭해야만 클릭 이벤트가 동작하는 문제였습니다.

해결 방법을 찾으면서 여러가지 답변이 있었습니다. event.stopPropagation()을 사용하는 방법도 있었고 click 함수에 return false를 추가하는 방법도 있더군요. 다만 적용해보니 실제 동작하지는 않았습니다.

! 아이폰 클릭 이슈 해결방법

결국 잘 동작한 해결방법은 의외로 간단합니다. 모바일 환경에는  css의 hover에서 허위 content 엘리먼트를 추가한지 않도록 하는 방법입니다.

"모바일 브라우저에서 :hover { content: ''; } 사용하지 않기"

그럼 어떤 방법이 가장 빠르고 쉬운 해결방법일까요? 일단 미디어 쿼리를 사용할 수 있을 것입니다. 해결 방법은 아래와 같죠.


i. 모바일인 경우 touch와 같은 클래스 추가하여 해결하기
hover이벤트를 막는 방법으로 모바일 환경인 경우 이를 인지할 수 있는 클래스를 선언하여 :hover인 경우 아무 동작이 없도록 하는 방법이 있습니다. 예를들어 모바일 환경이면 스크립트를 사용하여 body 태그에 touch라는 클래스를 추가할 수 있죠.

아니면 미디어쿼리(media-query)를 사용해서 모바일 환경에서는 마우스 오버 스타일을 동작하지 않고 반드시 768 픽셀이 넘는 경우에만 해당하는 hover 스타일이 적용되도록 추가합니다.


ii. :hover는 반드시 mobile이 아닌 경우에만 동작하도록 하기
이 역시 데스크탑에서만 가능한 미디어쿼리를 적용할 수 있겠죠. 마우스 오버의 스타일 정의는 오직 모바일이 아닌 경우만 가능하도록 합니다.

iii. 모바일 전용 페이지인 경우 모든 hover 제거하기
만약 반응형이 아닌 모바일 페이지라면 :hover를 사용할 필요가 없을 것입니다. 이런 이유로 모바일 전용 페이지의 마우스 오버 스타일 코드를 제거합니다.