[CSS/defect] 특정 디바이스에서 터치 하이라이트 오류 수정 (feat. ios)

모바일 웹을 개발하다 보면 간혹 예상치 못한 터치 이슈를 만납니다. 특히 iPhone 15 Pro Max와 같은 최신 디바이스에서, 버튼을 눌렀을 때 터치 하이라이트가 엉뚱한 위치에 표시되는 문제를 겪은 적 없으신가요?
이번 포스팅에서는 그런 문제를 겪었을 때, CSS 속성 touch-action: manipulation;이 어떻게 해결책이 되었는지 공유해 보려 합니다.

어떤 문제에 효과적인가?

1. 더블탭 확대 방지

모바일 Safari 등에서 버튼이나 링크를 두 번 탭할 때 화면이 자동으로 확대되는 현상을 막습니다.

2. 터치 반응 지연 제거 (300ms 딜레이)

과거 모바일 브라우저는 더블탭 확대를 구분하기 위해 클릭 반응에 300ms 지연을 뒀습니다. touch-action: manipulation;으로 즉시 반응하도록 합니다.

3. iOS에서 터치 하이라이트 오작동 해결

iPhone 15 Pro Max 등 일부 기기에서 버튼 터치 시 하이라이트가 잘못 표시되는 문제를 해결합니다.

 

해결 방법: touch-action: manipulation;

해결책은 간단했습니다. 터치 관련 기본 동작을 제한해 주는 CSS 속성 한 줄을 추가하면 됩니다.

button {
  touch-action: manipulation;
}

 

이 속성은 사용자의 탭이나 클릭 같은 조작에만 반응하고, 브라우저가 기본적으로 처리하는 확대, 스크롤, 터치 하이라이트 등의 동작은 제외하도록 설정합니다.

touch-action 속성값에 대해서

속성값	설명	사용 예시
auto (기본값)	브라우저가 터치 이벤트에 대해 기본 동작(스크롤, 확대, 더블탭 등)을 자유롭게 처리	특별한 제약 없이 기본 상태로 유지하고 싶을 때
none	모든 브라우저 기본 터치 동작 차단 (스크롤 X, 확대 X, 터치 하이라이트 X)	캔버스, 지도, 드래그 등 커스텀 제스처 UI에 사용
pan-x	수평 스크롤만 허용, 수직 스크롤 차단	가로 슬라이더 영역에서 세로 스크롤 충돌 방지
pan-y	수직 스크롤만 허용, 수평 스크롤 차단	세로 스크롤은 허용하면서 가로 제스처 감지 시
pan-x pan-y	수직/수평 스크롤 모두 허용 (사실상 auto와 유사하나 명시적 설정 가능)	모든 방향 스크롤 허용하면서 다른 동작은 제한하고 싶을 때
manipulation	탭, 클릭 등 조작만 허용, 확대/스크롤은 차단	버튼, 탭, 링크 등에서 더블탭 확대 방지 및 빠른 반응 필요 시

 

주의사항

- touch-action 속성은 터치 인터페이스에서만 의미가 있으며, 마우스 기반 환경에서는 영향이 없습니다.

- 일부 속성값은 Internet Explorer/Edge 레거시 버전만 지원하는 것도 있으므로, 크로스 브라우징이 필요하면 Can I Use 사이트에서 지원 범위를 꼭 확인하세요.

- 부모 요소에 설정된 touch-action 값이 자식 터치 이벤트에 영향을 줄 수 있습니다.

 

 

 

저처럼 iPhone 최신 기기에서 발생하는 터치 하이라이트 이슈를 겪으셨다면, 이 속성을 꼭 적용해 보시길 추천드립니다.

 

 

[AI] 미드저니(Midjourney) 비공개 서버 활용법 : 나만의 창작 공간을 만들고 싶다면?

 

[Git] PR 커밋 해시를 활용한 브랜치 생성 : 쉽고 간단한 가이드

 

[macOS] 메모(Memo)에서 PDF 파일로 변환하는 간단 방법

 

[Javascript] JavaScript 이벤트 위임(Event Delegation): 효율적인 이벤트 핸들링 방법

 

[HTML] video vs iframe, 어떤 것이 더 적합할까?