[CSS] iOS 사파리, 크롬 border-raidus / overflow: hidden 버그

 

문제상황

비디오 영역의 radius가 iOS 사파리, 크롬에서는 적용되지 않는 현상

원래는 radius: 8px 이 적용되어야 함

 

iOS 사파리, 크롬 border-raidus / overflow: hidden 버그
https://www.sungikchoi.com/blog/safari-overflow-border-radius/

.vid-box {
  position: relative; // 또는 isolation: isolate;
  border-raidus: 8px;
  overflow: hidden;
}

 

해결방법

본질은 쌓임 맥락 (stacking context) 에 있었다. 가끔 스타일 작업을 하다보면 z-index 위계가 꼬여서 position: relative를 잡아주는 경우가 있는데 이와 같은 맥락이었고, 그것을 쌓임 맥락이라고 부른다는 것을 알게 됐다. 비디오여서 radius가 안먹히는게 아니라 쌓임 맥락의 문제였다는 것을 알게 되었다.
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

 

데모

https://2k03z.csb.app/

위(버그) / 아래(해결)