[웹개발]크로스브라우징 이슈와 해결책 (특별히 사파리)

크로스브...뭐요?

크로스브라우징 이슈란 웹사이트나 웹 애플리케이션이 다양한 웹 브라우저에서 동일하게 동작하도록 만드는 것에 발생하는 문제를 뜻한다. 웹 브라우저마다 내부적으로 사용하는 렌더링 엔진, 자바스크립트 엔진 등이 다르기 때문에 동일한 웹사이트나 애플리케이션도 브라우저에 따라 다르게 표시되거나 동작되는 참사가 일어날 수 있다. 크로스브라우징 이슈가 일어나는 주요한 원인들은 다음과 같다.

1. 브라우저 렌더링 엔진의 차이
2. 자바스크립트 엔진의 차이
3. 브라우저의 HTML & CSS 버전 지원 차이
4. 사용자가 임의로 설치한 플러그인 또는 확장 프로그램으로 인한 차이
5. 디바이스 또는 OS 차이

크로스브라우징 이슈를 해결하려면 다양한 환경에서 테스트 (노가다) 밖에 없다.

사파리에서 크로스브라우징 이슈 해결법

1. 메타태그 설정

• 사파리에서 모바일 웹사이트를 제대로 표시하기 위해서는 태그를 사용해야 한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 터치 이벤트 최적화

• iOS에서는 터치 이벤트에 대한 반응이 다를 수 있기에 touchstart, touchmove, touchend 등의 이벤트를 활용하여 최적화할 필요가 있다.

3. CSS 호환성 확인

• Safari는 웹킷 기반 브라우저이므로 -webkit- 접두사를 사용한 CSS 속성을 확인해야 한다.

4. LocalStorage와 SessionStorage

• 보안(또는 폐쇄)으로 유명한 애플답게, Safari는 사이트 간 추적 방지 기능 때문에 LocalStorage나 SessionStorage의 동작이 제한될 수 있다. 그래서 이를 대체할 다른 저장 방법을 고려하는게 좋다.