이슈

ios 에서 click event 가 동작하지 않는 경우가 있다.

심지어 line attribute 로 role='button' 이나 style 로 cursor: 'pointer' 를 주었음에도 여전히 클릭이 동작하지 않는 문제이다.

도대체 무엇이 문제일까?

현상

문제 현상은 ios 에서 클릭이 안 된다는 점이다.
첫 렌더링시에 화면에 보이는 element 들은 click 이 된다.
그러나 화면에 보이지 않는 영역으로 스크롤하여 내려간다면 click 이 되지 않는 문제이다.

환경

이는 PC 나 안드로이드에서는 재현되지 않고 ios 에서만 재현이 된다.
그것도 사파리나 크롬 할 것 없이 재현이 된다.
때로는 크롬에서 더 잘 재현이 된다.

크롬... 믿었는데...

파악

렌더링 상의 문제라는건 테스트를 통해서 알 수 있었다.
왜냐하면 첫 화면에 보이는 부분은 잘 나타나지만 그 외의 스크롤 된 영역에서의 첫 번째 클릭은 동작을 하지 않는다는 것이다!

first click not working

원인

몇일의 R&D 를 통해 결국은 원인을 발견해 냈다.
그건은 ㄴㅇㄱ !!
상상도 못한 버그였다.

바로 css 이슈이다!

규명

문제의 원인은 공통으로 사용하는 css 에 있었다.
최근들어서 서비스를 만들거나 페이지를 만들경우 reset.css 라는 형식을 많이 사용한다.
이는 따로 reset.css 가 있는게 아니라 브라우저나 os 에서 제공하는 기본 스타일을 모두 하나의 통일된 공통 스타일로 reset 하고자 하는 목적에서 사용되는 css 를 의미한다.

그리고 우리의 문제는 이 reset.css 에 있었다.

버그

body { 
  height: 100%;
}

단 한 줄의 코드가 만든 이슈였다.
height가 100%로 제한됨으로써 그 외의 렌더링 영역에서 자동으로 붙어야 하는 ios click handler 가 제대로 동작을 안 하는 것이다.

이는 아래의 아티클에서도 소개하듯이 ios 고유의 문제로부터 비롯된다.
https://techoi.github.io/posts/ios-click-event-issue

정확하게 raw level 에서 버그의 근본적 원인을 찾은 것은 아니다.
다만 위의 아티클로부터 알 수 있듯이 ios 고유의 이벤트 시스템과 렌더링 시스템으로 인해서 click 가 안 붙는 문제가 있다

추측

그리고 이는 height 가 100% 일때 ios 상에서 화면의 크기를 딱 브라우저의 크기로 제한하기 때문에 그 외의 영역은 렌더링이 되지 않기 때문이지 않을까?
HTML 렌더링 라이프사이클에 따르면 렌더링이 되는 영역, 즉 화면에 보여지는 부분에서만 click 이벤트를 붙이려는 ios 의 문제가 결합된 부분이 아닐까 싶다.

느낌

잊어버릴까 무서워 글을 남긴다
정확한 원인은 파악 못 했고 그런 너낌이 든다~ 였지만
대부분은 이런 이슈를 겪지 않을 수도 있다.

다만 react, next.js 환경에서 ssr 로 하다보니 여러가지 다른 이슈에 대한 원인을 파악하려고 하다보니 시일이 오래 걸렸다.

그래도 잘 해결되서 금주에 새로운 서비스를 오픈하게 되어서 기쁘다.

나중에 아~ 그때~ 그런 문제의 너낌~ 이 있었는데 할 때 볼 수 있게 이 글을 남긴다.