[CSS] iOS border-radius + overflow: hidden 이슈

iOS에서 border-radius 와 overflow: hidden 속성이 같이 적용된 경우 제대로 동작하지 않는 이슈가 있습니다. 해당 이슈는 '쌓임 맥락(Stacking Context)' 과 관련된 이슈로 아래의 방법으로 해결할 수 있습니다.

div {
    z-index: 0;
    /* OR */
    isolation: isolate;
    /* OR */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    ...
}

 

해당 포스팅은 이 글을 참고하여 작성했습니다.