[css 이슈] ios 버튼 연속 클릭시 확대되는 이슈 해결 (touch-action)

ios에서 특정 버튼을 연속으로 클릭을 하게 되면

더블 탭 확대로 인식을해서 화면이 확대되고 버튼 클릭이 부자연스러워지는 경우가 있다.

 

위와 같은 경우에 touch-action 이라는 css 속성으로 해결할 수 있다.

 

1. touch-action

touch-action은 모바일이나 태블릿과 같이 터치 액션이 일어나는 디바이스에서 터치 이벤트를 처리할 때 특정 터치 액션만 가능하도록 적용하는 속성이다.

 

ex) touch-action:none 의 경우 모든 터치 이벤트를 비활성한다.

 

2. touch-action:manipulation

touch-action 속성 중 manipulation은 터치를 통한 수평, 수직 스크롤과 여러 손가락을 통한 확대/축소는 가능하게 해주고 그 외의 다른 동작들은 불가능하게 한다. 

.btn_tool {touch-action:manipulation;}