CSS @container query - Safari 17.5는 OK인데 18.0에서 다시 깨집니다 | 커뮤니티

container query 사용 중인데 Safari 18.0 베타에서 일부 컴포넌트가 깨졌다는 리포트가 들어옵니다. 17.5에서는 잘 됐는데...

.card {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card-title { font-size: 1.5cqi; }
  .card-meta {
    container-type: inline-size;  /* nested container */
    container-name: meta;
  }
  @container meta (min-width: 200px) {
    .card-meta-text { font-size: 0.9cqi; }
  }
}

nested container + cqi 단위 조합에서 Safari 18.0이 leaf의 cqi를 outer container 기준으로 계산하는 것 같습니다. 17.5는 정상 동작, 18.0 beta에서만 회귀.

WebKit bugzilla에 보고하긴 했는데 우회 방법이 있나요?

출시 일정상 18.0 GA 전에 회피 코드가 필요합니다.

댓글 0