문제 상황
CSS의 pointer-events: none 속성은 해당 요소가 마우스나 터치 이벤트를 받지 못하게 하여, 이벤트가 그대로 아래에 있는 요소로 통과하도록 만들어 줍니다. 데스크톱 브라우저나 최신 모바일 브라우저에서는 정상적으로 동작하지만, Android 4.4의 기본 WebView인 ChromeView에서는 touchmove 이벤트에 대해 이 속성이 무시되는 알려진 버그가 있습니다.
그 결과 오버레이 요소에 pointer-events: none을 지정했음에도 불구하고, 화면을 드래그하는 동안 발생하는 touchmove 이벤트가 여전히 오버레이에 의해 가로채져 아래 콘텐츠까지 전달되지 않는 현상이 나타납니다.
해결 방법: 자바스크립트 이벤트 리스너 활용
CSS만으로는 이 문제를 해결할 수 없기 때문에, 자바스크립트로 터치 이벤트를 직접 제어해야 합니다. 터치 지점이 터치 표면에 닿는 순간 touchstart 이벤트가 발생하는데, addEventListener() 메서드를 사용해 이 이벤트를 감지하고 기본 동작을 차단하면 됩니다.
overlay.addEventListener('touchstart', function(ev) {
ev.preventDefault();
});위 코드에서 사용된 preventDefault() 메서드는 브라우저가 해당 이벤트에 대해 수행하는 기본 동작(스크롤, 확대·축소 등)을 실행하지 않도록 막습니다. 이렇게 처리하면 오버레이가 터치 이벤트를 독점하지 않고, 이벤트가 아래 요소로 정상적으로 전달될 수 있습니다.
적용 시 주의 사항
preventDefault()를 호출하면 해당 영역에서 스크롤이나 탭 같은 기본 제스처가 함께 차단될 수 있으므로, 실제 서비스 UI에 부작용이 없는지 반드시 테스트해야 합니다.- 이 버그는 Android 4.4의 구형 WebView(ChromeView)에 국한된 문제로, 이후 버전의 Android System WebView와 Chrome에서는 수정되었습니다.
- 가능하다면 대상 기기의 WebView를 최신 버전으로 업데이트하거나, 최신 웹 뷰 환경을 사용하도록 유도하는 것이 근본적인 해결책이 될 수 있습니다.