1️⃣ 어쩌다 버그를 마주했는가
모바일 환경의 하단 내비게이션 바를 구현하던 중 모바일 환경에서 터치 시 의도하지 않은 하이라이팅을 발견하였습니다.
🔥 버그 상황 코드 혹은 스크린샷
📑 버그 상황 설명
모바일 환경에서 해당 버튼을 터치 시, 의도하지 않은 하이라이팅이 발생하였습니다.
2️⃣ 🐛버그를 일으키는 코드 혹은 원인은 무엇인가
OS와 안드로이드의 웹킷 기반 브라우저(사파리, 크롬 등)에서 링크를 터치하면 해당 위치를 표시하는 하이라이트가 나타납니다.
3️⃣ 💦어떤 시도를 해보았나
관련된 이슈를 구글에 검색, 아래 기술한 레퍼런스들 참조하여
-webkit-tap-highlight-color를 변경해주어야 한다는 사실을 인지하였습니다. 웹킷 공식 문서4️⃣ 💼최종 해결 방법
(이 줄은 저장 시 지워주세요 - 해당 버그를 고치기 위해서 사용한 방법, 코드) css에 webkit 코드를 통해서 highlight를 transparent(투명한) 형태로 바꿔주어 해결하였습니다.
-webkit-tap-highlight-color: transparent;