Chrome Devtools와 SVG 이벤트 전파 이슈

Chrome Devtools와 SVG 이벤트 전파 이슈

문제의 배경과... 결론 요약(?)

• Lucide 아이콘을 이용한 삭제 버튼을 만들었고, 마우스 오버 시 아이콘의 색상이 빨간 색으로 변하게 하고 싶었음. 아이콘은 <button> 태그에 감싸져 있었음. <button><Trash /></button> <- 이런 식으로.
• 그런데, button의 패딩 영역에 마우스 오버 시 원하는 대로 아이콘의 컬러가 빨갛게 변하지만, svg 아이콘 영역에 마우스 커서가 올라가면 아이콘 컬러가 다시 회색으로 되돌아오는 문제가 발생함.
• tailwindcss로 별의 별 짓을 다 해보고 아이콘 컴포넌트가 아닌 생 SVG 코드를 가져와서 인코딩도 해보고, important css(!)도 먹여봤는데, 아무것도 해결되지 않음.
• stackoverflow에서 react-icons 라이브러리 사용 시 비슷한 문제가 있다는 글을 발견함(해결책은 딱히 없었음). Lucide 아이콘 라이브러리 뿐만 아니라 여러 아이콘 라이브러리들이 갖고 있는 문제인가 생각함.
• 그렇게 40분 넘게 씨름하다가... 그냥 포기하려고 개발자 도구를 닫았는데??? 갑자기 잘 동작함. ?????? 어이 없어;; 그냥 맨 처음 코드로도, 개발자 도구만 닫으면 원하는 대로 잘 작동함; 개발자 도구를 다시 열면? 다시 문제가 생김;;; ^^;;
• 결론은.. 사용자 입장에서는 아무 문제가 없었던 것... 이런 일도 있구나.. 여러분은 저처럼 생고생하지 마세요^^...

아래는 더 정리된 기록 👇

증상

• 크롬 개발자 도구가 닫힌 상태에서는 버튼 내부의 SVG 아이콘에 마우스 hover 시 버튼의 hover 효과가 정상 작동함
• 크롬 개발자 도구가 열린 상태에서는 SVG 영역에 마우스 hover 시 버튼의 hover 효과가 사라짐
• 개발자 도구를 닫으면 다시 정상 작동

코드

<button
  type="button"
  onClick={e => {
    e.stopPropagation();
    onDelete();
  }}
  className="absolute top-8 right-8 p-2 hover:text-button-danger-bg"
>
  <Trash2 size={20} />
</button>

시도한 해결 방법

1. SVG에 pointer-events-none 적용
2. 버튼의 모든 자식 요소에 pointer-events-none 강제 적용
3. 이벤트 핸들러를 SVG에 직접 부여
4. background-image로 SVG 처리

결론

• 크롬 개발자 도구의 DOM 감시 기능이 SVG 이벤트 전파에 영향을 미치는 것으로 추정
• 실제 사용자 환경에서는 문제가 발생하지 않으므로 추가 대응 없이 현재 코드 유지
• 유사 이슈 발생 시 개발자 도구를 닫고 테스트해볼 것을 권장

관련 이슈

• React Icons, Lucide React 등 SVG 기반 아이콘 라이브러리에서 비슷한 현상 보고됨
• Stack Overflow: 'React Icon Click event' 관련 논의 참고 (링크 아니 그런데 이제 보니 7년 전 글이었네)