aspect-ratio Troubleshooting on Safari#

1
<!-- 사용처 -->
2
<IconWrapper>
3
  <ImageComponent :src="imgSrc" aspect-ratio="1" />
4
</IconWrapper>

1
/* IconWrapper */
2
.icon-wrapper {
3
  width: 40px;
4
  height: 40px;
5
  border-radius: 50%;
6
  overflow: hidden;
7
}
8

9
/* ImageComponent 내부 — aspect-ratio를 prop으로 주입 */
10
img {
11
  aspect-ratio: v-bind(aspectRatio); /* → aspect-ratio: 1 */
12
}

1
/* ❌ 이 상태에서 aspect-ratio는 무시된다 */
2
.icon-wrapper {
3
  width: 40px;
4
  height: 40px; /* height가 확정값으로 존재 */
5
}
6
img {
7
  aspect-ratio: 1; /* 무시됨 */
8
}

1
flex (stretch) → flex (stretch) → flex (stretch) → div height 결정
2
                                                           ↓
3
                                                   img가 이 height를 받음
4
                                                   → aspect-ratio 충돌

1
1. 이미지 로드 전
2
   → Safari가 aspect-ratio를 무시한 채 stretch 높이로 img 크기를 잡음
3
   → 잘못된 크기가 상위 flex에 전파 → 인접 요소 밀려남
4

5
2. 이미지 수신 완료
6
   → 컨테이너의 고정 width/height가 최종 기준이 되어 크기 복원
7
   → 인접 요소 다시 원래 자리로 돌아옴
8

9
3. 결과
10
   → 렌더링 완료 후에는 정상으로 보이지만
11
   → 네트워크 latency만큼 fluctuation이 지속되어 사용자에게 노출됨

1
<!-- 사용처 — aspectRatio prop 전달 제거 -->
2
<IconWrapper>
3
  <ImageComponent :src="imgSrc" />
4
</IconWrapper>

1
/* IconWrapper — 크기와 모양을 여기서 확정 */
2
.icon-wrapper {
3
  width: 40px;
4
  height: 40px;
5
  border-radius: 50%;
6
  overflow: hidden;
7
  flex-shrink: 0; /* flex 환경에서 찌그러짐 방지 */
8
}
9

10
/* ImageComponent 내부 — 부모를 채우는 역할만 담당 */
11
img {
12
  width: 100%;
13
  height: 100%;
14
  object-fit: cover; /* 비율 유지하며 크롭, aspect-ratio 대체 */
15
  display: block;    /* inline 기본값의 baseline 공백 제거 */
16
  /* aspect-ratio 제거 */
17
}

1
/* ✅ aspect-ratio는 wrapper에서 제어, height는 제거 */
2
.icon-wrapper {
3
  width: 40px;
4
  /* height 제거 */
5
  aspect-ratio: v-bind(aspectRatio); /* 1, 16/9 등 외부에서 주입 */
6
  border-radius: 50%;
7
  overflow: hidden;
8
  flex-shrink: 0;
9
}
10

11
img {
12
  width: 100%;
13
  height: 100%;
14
  object-fit: cover;
15
  display: block;
16
}

1
// Chakra UI Image — aspectRatio prop 전달 시 내부 렌더링 구조
2
<Box
3
  position="relative"
4
  aspectRatio={ratio}     // ← wrapper Box에만 aspect-ratio 적용
5
  overflow="hidden"
6
>
7
  <img
8
    style={{
9
      position: "absolute",
10
      inset: 0,             // top/right/bottom/left: 0
11
      width: "100%",
12
      height: "100%",
13
      objectFit: "cover",
14
    }}
15
  />
16
</Box>

1
// Next.js Image — 내부 렌더링
2
<span style={{ display: "inline-block", width, height }}>
3
  <img style={{ width: "100%", height: "100%", objectFit: "cover" }} />
4
</span>

1
flex-container (align-items: stretch — 기본값)
2
  ├── sibling (height: 96px — 가장 키 큰 자식)
3
  └── icon-wrapper (height: 96px ← stretch로 결정)
4
        └── img (height: 100% = 96px, aspect-ratio 무시됨)

1
.flex-container { display: flex; /* align-items 미지정 → stretch */ }
2
.icon-wrapper   { width: 44px; /* height 없음 → stretch로 결정 */ }
3
img             { aspect-ratio: 1; /* Safari에서 무시됨 */ }

1
flex-container (align-items: flex-start)
2
  ├── sibling (height: 96px)
3
  └── icon-wrapper (height: 44px ← 자체 크기 유지)
4
        └── img (height: 100% = 44px, aspect-ratio 정상)

1
.flex-container { display: flex; align-items: flex-start; }
2
.icon-wrapper   { width: 44px; height: 44px; }
3
img             { width: 100%; height: 100%; object-fit: cover; }

1
flex-container
2
  └── icon-wrapper (position: relative, aspect-ratio: 1, width: 44px)
3
                    → 높이: 44px (aspect-ratio로 결정)
4
        └── img (position: absolute, inset: 0)
5
                    → flex 자식 아님 → stretch 무관

1
.icon-wrapper {
2
  width: 44px;
3
  aspect-ratio: 1;    /* wrapper에서 비율 제어 */
4
  position: relative;
5
  border-radius: 50%;
6
  overflow: hidden;
7
}
8
img {
9
  position: absolute; /* flex context 이탈 */
10
  inset: 0;
11
  width: 100%;
12
  height: 100%;
13
  object-fit: cover;
14
}

1
flex-A (stretch) → flex-B (stretch) → flex-C (stretch) → icon-wrapper 최종 height 결정
2
                                                                 ↓
3
                                                   img가 이 height를 받음 → aspect-ratio 충돌