safari inset, intersection observer 크로스 브라우징하기

• 프로젝트: loplat X mobile
• 키워드: 크로스 브라우징, inset, intersection observer
• 상황 1
  1. Modal을 구현할 때, 회색 배경을
     

       position: fixed;
     inset: 0;

      으로 구현했다.
  2. 아이폰 8(12.0.1)과 맥북 사파리 13으로 접속해보니 Modal이 전혀 보이지 않는 현상이 발생했다.
• 해결과정
  1. Modal 컴포넌트는 createPortal을 이용하여 'portal' div를 부모로 삼아 렌더링한다.
     

       return ReactDOM.createPortal(
       <S.ModalWrapper>{children}</S.ModalWrapper>,
       document.getElementById('portal') as HTMLElement
     );

      사파리 개발자도구를 통해 확인해보니, portal DOM 의 children 내용은 잘 채워져있었다.

     

     비지니스 로직은 잘 동작하지만, CSS 크로스브라우징 문제로 사파리에서 보이지 않는 것이라 판단했다.
  2. 개발자 도구의 스타일 속성을 확인해본 결과, inset 이 적용되지 않고 있었다.
     

     

     
     MDN 문서를 통해 사파리 14부터 inset property를 지원하는 것을 확인했다.
     

     

     >= 14.1

  3. inset 대신 top, bottom, left, right를 사용함으로써 문제를 해결했다!
     

       top: 0;
     bottom: 0;
     left: 0;
     right: 0;​

• 상황 2
  1. 아이폰 8에서 특정 정보의 목록을 보여주는 페이지 전체가 먹통이 되는 현상을 발견했다.
  2. 데이터를 불러오는 로딩 바가 보이다가 데이터가 불러와지는 순간 화면이 깨진다.
  3. 불러온 데이터를 렌더링하는 코드에서 사파리 옛 버전이 지원하지 않는 기능이 있는지 알아보아야한다.
• 해결과정
  1. 상황 1과 마찬가지로 CSS를 의심했으나, CSS 때문에 화면 전체가 먹통이 되지는 않을 것이다.
  2. 팀원 중 한 분이 무한 스크롤 부분에서 문제가 있지는 않을까 의견을 내주셨다.
  3. 무한 스크롤은 IntersectionObserver Web API를 이용해 직접 구현한 상태였다.
  4. MDN 문서를 통해 IntersectionObserver는 아이폰 8(사파리 12.0.1)을 지원하지 않는다는 것을 확인했다.
     

     

     >= 12.1

  5. 사파리 지원을 위해 Polyfill을 사용할 때라는 것을 깨닫고, intersectionObserver polyfill 을 검색하니 w3c github에서 지원하는 폴리필을 발견할 수 있었다.(https://github.com/w3c/IntersectionObserver/tree/main/polyfill)
  6. 해당 라이브러리를 설치한 뒤,
     

       "intersection-observer": "^0.12.0",​

      무한 스크롤을 구현한 컴포넌트에서 import 했다.
     

       require('intersection-observer');

  7. 아이폰 8에서도 잘 동작하는 것을 확인했다!
• 의의
  1. safari 크로스 브라우징에 항상 신경쓰자.
  2. 팀원분이 급하게 처리해야하는 버그에 대해 적극적으로 원인을 파악하고 빠르게 해결했다.