🚨 Hotfix v1.0.1 - 사파리에서 포즈픽 레이아웃 깨짐

[seondal]

vh와 dvh

전개: 사파리에서만 전체 화면 높이가 이상함

• height: 100vh를 사용해서 생긴 이슈였다
• 참고로 본 프로젝트에서는 TailwindCSS를 사용하기 때문에 min-screen-[100dvh] 에서 min-h-screen으로 바꿨다
• vh를 적용하면 Safari 브라우저에서는 하단(또는 상단) 도구영역에 따라 뷰포트 높이가 달라진다.
• 즉, 사파리에서 100vh를 사용할 경우 아래(또는 위)에 있는 도구 영역까지 포함해서 높이를 계산하기 때문에 보이는 영역보다 좀 더 크게 잡힘
• 이 때문에 화면 전체 높이를 지정하려면 dvh 라는 동적 높이 단위를 사용해야한다
• 100dvh 로 지정하면 사파리에서도 보여지는 화면 영역을 잘 지정한다

body {
  min-height: 100dvh;
}

그런데.

위기: dvh가 적용되지 않는 브라우저

• 특정 브라우저에서는 dvh가 적용되지 않아서 height를 아예 지정하지 않은 것처럼 된다
• 사파리에서는 잘 보이는데 다른 브라우저에서는 안보이는 현상 발생
• 특히 부모에게 dvh로 높이를 지정했는데 자식이 flex 속성을 가진다면 그 자식이 아예 안보이는 심각한 이슈가 생겨버렸다
• 내가 발견한 dvh가 적용 안된 브라우저는 Chrome과 크롬 기반 다른 브라우저 (웨일, 삼성인터넷, react native webView 등)이 있었다.

(숨겨진) 발단

참고로 이 글을 쓰게 된 계기이자 이 높이 지정을 포함한 레이아웃 관련 스타일링 코드를 전부 뜯어보고 리팩토링하게 된건,
저 리액트 네이티브 웹뷰에서만 레이아웃이 다르게 보이던 이슈 때문이다^^ 덕분에 많은걸 배워간다..(하 하 !)

아무튼, 그러면 사파리나 다른 브라우저 둘 중 하나는 레이아웃을 포기해야할까?
당연히 아니다

절정: 사파리에만 다르게 스타일링하기

• 미디어쿼리 @supports를 이용해서 브라우저를 분기처리하면 사파리 같은 특정 브라우저에만 특정 css를 적용할 수 있다.
• 정확히는 자바스크립트로 user.agent를 사용할 때 처럼 정확한 브라우저를 알아내는건 아니다
• 대신 -webkit-touch-callout: none 속성을 지원하는지를 확인하면 webkit 기반 브라우저인지 그 여부를 알 수 있다
• 사파리는 대표적인 웹킷 기반이라 이렇게 css로도 구분이 가능하다
• 참고로 원래 webkit-touch-callout은 브라우저에서 화면을 길게 눌렀을 때 나오는 동작(링크 공유나 새 탭 열기 같은 것들)을 제어하는 속성이지만.. 여기서는 웹킷 브라우저 분기처리에 이용되었다

@supports (-webkit-touch-callout: none) {
  body {
    min-height: 100dvh;
  }
}

결말: -webkit-fill-available

• 구글링 하다보니 이런 것도 있었다
• 뷰포트의 사용 가능한 공간에 맞게 높이를 채워서 지정해주는 속성이라고 한다
• 동적일 때는 100dvh로 자동 지정해주기 때문에 상위개념이고 편하긴 한데
• 마찬가지로 웹킷 기반이라 크롬 기반 같은 다른 브라우저에는 적용되지 않는다.

body {
  min-height: 100vh;
}

@supports (-webkit-touch-callout: none) {
  body {
    min-height: -webkit-fill-available;
  }
}

Epilogue

• 괜히 웹으로 만든 서비스를 앱으로 빌드하겠다고 리액트 네이티브에 웹뷰 썼다가
• 지원하는 브라우저 달라서 css 다르게 적용되고,, 대체 왜 다른거냐고 외치며 이것저것 많은 것을 시도하며 난리쳤는데
• 그러다보니 이젠 기기랑 브라우저 호환성까지 생각해가며 스타일링 관련 코드를 디버깅하고 리팩토링하는 단계에 이르렀다
• 이 글에서 다룬 동적 뷰포트 높이 이슈가 바로 그 중 하나... 다른 이슈 해결기는 나중에 기회가 되면 써보는걸로..
• 지금 이 이슈를 해결하려고 2시간정도 삽질을 했는데 그래도 이 기회로 많이 배우고 한층 더 성장한 것 같아 뿌듯하다 :)
• 플레이스토어 배포도 무난히 잘 할 수 있기를 🙏

구세주들

• https://velog.io/@sangpok/Safari-100vh-%EC%9D%B4%EC%8A%88
• https://frontdev.tistory.com/entry/height-100vh-ios-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95-webkit-fill-available
• Add -webkit-fill-available for 100vh classes to fix iOS bottom navbar tailwindlabs/tailwindcss#4515
• https://miyanims.tistory.com/15