[IE to Chrome/Edge] 브라우저 마이그레이션: CSS/JS 호환성(easy편)

기존에 Internet Explorer(IE) 기준으로 맞춰져 있던 내부 시스템/UI 요소들을 Chrome/Edge 전환하는 작업을 하게 됐다.

각 브라우저의 기본 스타일 차이와 CSS 선택자/전역 객체 의존성 때문에 생각보다 다양한 UI 깨짐과 JS 오류를 마주치고 있는 중이다

지난주 작업에서 직면했던 대표적인 이슈들과 원인, 그리고 해결 과정을 정리해보려고 한다

 

1. 전역 event 객체 참조로 인한 JavaScript 오류

문제: 브라우저 전환 후 드롭다운 메뉴 외부를 클릭할 때 콘솔에 아래와 같은 에러가 발생하며 닫힘 로직이 동작하지 않는 현상이 발생했다

Uncaught TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'

 

원인: 기존 코드에서는 이벤트 핸들러 내부에서 매개변수로 이벤트를 전달받지 않고 있었다

• IE 환경에서 동작하던 전역 event 객체를 암묵적으로 참조하고 있었다
• Chrome/Edge에서는 다르다. 전역 event 참조 시 의도치 않은 객체나 undefined가 전달되어 contains() 메서드에서 타입 에러를 일으킨다.

해결: event 명시

 

2. Placeholder 스타일 먹통 현상

문제: Chrome에서 Placeholder 색상 스타일이 안 먹힘

원인: IE 전용 선택자인 :-ms-input-placeholder만 단독 선언되어 있어 Chrome이 구문을 무시한 것이 원인으로 보인다

해결: 표준 선택자인 ::placeholder를 같이 챙겨준다

 

3. <select> 박스 화살표가 사라짐

문제: 셀렉 박스 화살표가 안 보임 & 이미지 설정했는데 안 보임

원인: appearance: none으로 기본 화살표를 날렸고(IE에선 안 예뻐서 커스텀 적용하느라 디폴트를 죽임), 이미지는 IE에서만 지원하는 코드였음

해결: to-be 브라우저에서 지원하는 기본 화살표를 살리고, 커스텀 이미지를 명시

 

4. Disabled <textarea> 회색 배경 묻어남

문제: Chrome으로 오니 비활성화(disabled) 영역에 뜬금없이 어두운 회색 배경이 깔림

원인: Chrome의 기본 textarea:disabled가 배경색 대충 회색임. 그리고 내부상 어디서 가로채서 주고 있었음;;(찍어보니 딱 이 색깔임)

해결: 커스텀 클래스로 오버라이드

 

5. 입력 영역 클릭할 때 생기는 검은색/파란색 테두리 (Focus Outline)

문제: 입력창 클릭 시 IE엔 없던 두꺼운 테두리가 노출됨

원인: Chrome 브라우저의 기본 접근성 포커스 스타일(outline)이 발동한 것으로 보임

해결 : outline을 끄고 디자인에 맞는 border를 직접 제어

 

 

 

-

 

쓰고나니 별거없네..