---

Safari에서 border-radius와 overflow: hidden

Safari에서 CSS border-radius 와 overflow: hidden 속성을 함께 사용할 때 border-radius(둥근 경계) 속성이 적용되지 않는 문제가 있습니다. Safari의 WebKit 엔진의 버그로 인해 발생하는 것으로 알려져 있습니다. 특히 카카오맵 API를 이용한 지도 요소와 같이 복잡한 쌓임 맥락(stacking context; 요소 간의 쌓임 순서)을 가진 요소에서 자주 발생하는 문제입니다. IOS(16.3.1), macOS Big Sur(11.7.1)를 포함한 이전 버전에서는 발생하며 이후의 최신환경에서는 발생하지 않는 것으로 제가 경험했습니다.

isolate: isolate

해결 방법의 하나는 CSS isolate: isolate 속성을 적용하는 것입니다. 이 속성은 쌓임 맥락에서 격리(분리)해 주는 역할을 합니다. 쌓임 맥락에서 격리된(독립된) 요소는 border-radius 와 overflow: hidden 속성이 제대로 적용됩니다. 또한 API와 같이 커스텀 하기 어려운 요소들을 조금 더 쉽게 커스텀 할 수 있게 합니다.

.element {
  isolate: isolate;
}

---