[이슈노트] iOS 이슈 모음 #8 (14 이하에서 gap 이슈)

 

 

최근 iOS 14 이하 버전에서 Gap이 적용되지 않는 문제가 발생했다. 😥

이미 모든 작업은 완료된 상태였고, iOS 14.6에서는 문제가 없다고 판단하여 이슈를 놓쳤다.

다행히, 다른 환경에서는 문제가 없었기 때문에 대규모 수정보다는 부분적인 수정을 선택했다.

 

이를 위해 @supports를 활용하여 iOS에만 해당되는 CSS를 작성하기로 결정했다.

 

 

예를 들어, 

-webkit-touch-callout은 iOS에서만 적용되며, translate: none은 macOS와 iOS의 Safari 14.1 이후부터 적용된다.

따라서 이 두 가지를 결합하여 다음과 같은 @supports 규칙을 만들 수 있다.

 

 

 

@supports (-webkit-touch-callout: none) and (not (translate: none)) {
     /* iOS에서만 적용되는 CSS 코드 작성 */
}

 

 

위의 코드는 모바일 Safari에서만 작동하며, iOS 버전이 14.5 미만인 기기에 적용된다.

이와 같은 수정으로 iOS 14 이하에서의 Gap 적용 문제를 해결했다!

 

 

 

 

---

참고)

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries

Using feature queries - CSS: Cascading Style Sheets | MDN

 

https://ppuzio.medium.com/flexbox-gap-workaround-for-safari-on-ios-14-13-and-lower-ffcae589eb69

Flexbox gap workaround for Safari on iOS 14, 13 and lower

 

https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices

CSS media query to target only iOS devices