ios14 혹은 하위 버전의 ios 에서 먹지 않는 css 한가지 (inset 속성)

해프닝

프런트엔드의 재미난(?) 고충 중의 하나. 특정 기기에서 이상하게 보인다는 것이 qa를 통해서 들어왔다. 분명 내 화면에서는 문제가 없었는데 왜 그럴까... 하아~ 내가 겪은 문제는 아래와 같았다.

 

아래는 내가 구현해둔 로딩 페이지이다. 로딩 중이라는 텍스트를 inset-0이라는 속성을 이용해서 화면 가운대 배치를 했다.

inset: 0 속성은 fixed나 absolute의 요소를 중앙 배치 하기 위해서 쓰기 아주 좋은 속성이다.

inset: 0은 top: 0, bottom: 0, right: 0 , left: 0의 기능을 하기에 4개나 써야하는 속성을 하나의 값으로 해결할 수 있다.

 

그런데 구형 ios 버전을 가지고 있는 기기에서는 중앙정렬이 되지 않고,

아래와 같이 구석에 콕 박혀있게 디스플레이되게끔 나오는것이다... 

 

 

중앙정렬 관련해서는 inset 속성을 사용했기에 해당 css를 검색해보기로 했다.

 

다큐먼트를 보면서 최하단에 이렇게 호환가능한 버전이 써있는건 여러번 봤을 것이다.  (존재는 알았지만 눈여겨본적이 없느...)

여기서 ios 14.5 버전 이후로 지원한다고 되어있는데, 테스트한 기기는 14.5 보다 낮은 버전의 기기였다. 그래서 inset 속성이 정상적으로 지원하지 않는것 같다.

 

해결

해결 방법은 간단하다. inset의 무엇을 의미한다고 했던가? 4가지 속성을 한번에 표현한다고 했는데 그 속성을 각각 모두 써주면 된다. 고로 아래와 같이 모두 풀어서 써주면 원하는 css를 다시 입힐 수 있다.

// 구버전 ios 에서 지원 X
inset: 0

// 수정 코드
top: 0
bottom: 0
right: 0
left: 0

 

 

---

 

이와 비슷하게  display: flex 의 속성을 사용했을때 gap의 속성도 구버전에서는 정상적으로 작동하지 않는 경우가 있다.

이럴때는 flex의 설정을 grid로 변경하거나 (grid의 gap은 정상적으로 작동한다..!) gap 대신 margin 속성을 이용해서 원하는 디자인을 구현해야한다.

 

 

예상치 못한 구현버전의 위협....멈춰...!