Chrome, Safari(WebKit), 앱 WebView에서 레이아웃과 flex 계산이 조금씩 달라지는 경우를 줄이기 위한 정리입니다. 같은 코드라도 환경마다 결과가 다를 수 있다는 전제에서, 자주 걸리는 지점만 빠르게 훑습니다.
왜 Safari를 한 번 더 보나
대부분의 이슈는 Safari(WebKit) 쪽에서 처음 드러나는 경우가 많습니다. Chrome만으로 끝내지 말고, 배포 전에 Safari(iOS·macOS)에서 한 번 확인하는 것이 비용 대비 효과가 큽니다.
Flex · 레이아웃
justify-between이 기대와 다르게 보일 때
Flex 아이템의 기본값은 min-width: auto입니다. 자식 콘텐츠가 줄어들지 않으면 남는 가로 공간이 생기지 않아 space-between처럼 보이지 않을 수 있고, Safari에서 특히 자주 체감됩니다.
대응
- 가로 한 줄 컨테이너:
min-w-0(필요 시w-full) - 줄어들면 안 되는 요소:
shrink-0 - 긴 텍스트 한 줄 말줄임:
min-w-0+truncate
button과 display: flex
button을 flex 컨테이너로 쓸 때, WebKit 계열에서 자식이 가로 전체를 채우지 않는 경우가 있습니다. 내부 행에 w-full min-w-0를 명시하면 안정적인 경우가 많습니다.
gap
Flex gap은 Safari 14.1 이상에서 지원됩니다. 더 낮은 버전을 고려해야 한다면 margin 기반 간격을 검토합니다.
레이아웃 · CSS
| 주제 | 메모 |
|---|---|
100vh / 100dvh | iOS Safari에서는 주소창 표시 여부에 따라 100vh 체감이 달라질 수 있습니다. 하단 고정 UI는 safe-area와 함께 설계하는 편이 안전합니다. |
position: sticky | 조상에 overflow: hidden \| auto \| scroll이 있으면 기대와 다르게 동작할 수 있습니다. |
aspect-ratio 등 | 구형 브라우저에서는 지원이 없거나 다를 수 있으니, 대상 범위만 확인합니다. |
입력 · 폼
input type="date" 등 네이티브 컨트롤은 OS·브라우저마다 UI와 스타일이 다릅니다. autocomplete, inputmode, :focus-visible 등도 환경에 따라 체감 차이가 있습니다.
스크롤 · 터치
overscroll-behavior, touch-action, passive 리스너는 지도·슬라이더·스크롤이 겹치는 화면에서 브라우저별로 미묘하게 다를 수 있습니다.
이미지 · 미디어
loading="lazy"는 조건에 따라 적용되지 않을 수 있습니다. AVIF·WebP는 <picture> 등으로 폴백을 두는지 점검합니다.
JS · API
scrollIntoView({ behavior: 'smooth' }), ResizeObserver, IntersectionObserver 등은 대체로 널리 쓰이지만, 지원 범위를 정한 뒤에는 그 범위 안에서만 가정합니다. Clipboard API는 HTTPS·권한·Safari 정책을 함께 봅니다.
네트워크 · 보안
서드파티 쿠키, SameSite, CORS preflight는 브라우저 정책과 캐시 동작이 겹치면서 증상이 달라 보일 수 있습니다.
앱 WebView
User-Agent나 앱 전용 분기와 맞물리는 경우가 있습니다. safe-area, 하단 고정 CTA, 본문 하단 패딩 등은 팀에서 쓰는 레이아웃 패턴과 맞추는 것이 좋습니다.
