크로스브라우징 이슈 해결 사례

terry yoon·2022년 4월 6일

들어가며...

이 글은 주니어 개발자로서 업무를 하다 만난 에러 중 크로스브라우징과 관련된 이슈를 해결한 사례를 정리한 글이다. 물론 아직 많은 이슈를 만난 건 아니지만, 주기적으로 크로스브라우징 관련 이슈를 만날 경우 업데이트 할 예정이다.

@supports

@supports Web API 문서

주어진 css 기능을 해당 브라우저에서 지원하는지 여부를 체크하여, 지원 여부에 따라 스타일 지정이 가능하다.

@supports (display: grid) {
  div {
    display: grid;
  }
}

@supports not (display: grid) {
  div {
    float: right;
  }
}

회사 프로젝트를 진행하며 웹 페이지 내 floating button을 구현해야 했는데, safari에서 flex gap이 적용되지 않는 문제점이 발견되었다.

CanIUse 페이지에서 확인하면 다음과 같이 사파리에서도 14.1 이후 브라우저에서 flex gap을 지원하지만, 그 이전 버전에서는 적용되지 않았다. 개발자 도구로 확인해 보니, 해당 요소에 gap 스타일이 적용되었지만 우리가 예상한 요소 사이에 gap이 적용된 것이 아니라 위의 사진 처럼 ul 요소의 컨텐츠 영역만 위로 커진 것을 확인 할 수 있다.

이 방법에 대한 문제점을 찾던 중, 브라우저에서 특정 css를 지원하는지 파악할 수 있는 @supports를 알게 되었다.
@supports를 이용해, 특정 브라우저를 걸러내어 css를 적용하는 방법이다.

@supports (-webkit-touch-callout: none) and (not (translate: none)) {
    & > *:not(:last-child) {
      margin-bottom: 16px;
    }
  }

-webkit-touch-callout: none

이 속성은 오직 IOS의 사파리에서만 지원되는 속성이다. 따라서 해당 속성을 지원하는 브라우저는 무조건 IOS의 사파리라는 것을 알 수 있다. ( Web API 문서 )

translate: none

해당 속성은 MacOs와 IOS의 Safari 14.1 이후 버전부터 적용되는 속성이다. 따라서 해당 속성을 지원하지 않는다면 Safari 가 아니거나 Safari 14.1 이전 버전이라는 말이다.

따라서 두 가지 속성을 조합하여 조건을 세우면, IOS의 Safari이면서 버전이 14.1 이전인 브라우저에서 @supports를 이용해 대체 CSS 속성을 부여할 수 있게 된다.

참고 블로그

Safari input shadow

하위 버전의 사파리에서 input 태그에 기본적으로 shadow 속성이 적용되는 것을 확인할 수 있다.
이를 위해서 appearance 설정을 하여 기본 속성을 제거할 수 있다.

input{
 	-webkit-appearance: none;
 	-moz-appearance: none;
 }

Safari on IOS input Caret position 문제

IOS에서 돌아가는 사파리 환경에서, <input> 엘리먼트에서 Caret(일명 Cursor)의 포인트 위치와 관련된 문제가 발생하였다.

문제 상황

다음과 같이 페이지 내에서 input 요소의 너비보다 긴 텍스트를 입력하고 난 뒤, focusout(blur)를 한 뒤 다시 해당 input 요소로 focus(keyboard 활성화)할 경우 다음과 같이 Caret의 위치가 예상과 달리 텍스트 범위 밖에 위치하게 된다.

이는 IOS의 사파리에서 발생하는 독특한 현상으로, 아마 input 요소의 padding 영역을 인식하지 못하여 생긴 이슈라고 생각된다.