반응형
문제상황
비디오 영역의 radius가 iOS 사파리, 크롬에서는 적용되지 않는 현상
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
데모
반응형
'개발일지 > CSS' 카테고리의 다른 글
[CSS] :not(:placeholder-shown) input에 값이 있을 경우를 나타내는 선택자 (0) | 2021.09.28 |
---|---|
[CSS] iOS 사파리, 크롬 height: 100vh 버그 해결 방법 (0) | 2021.06.16 |
[CSS] IE 에만 적용하기 / CSS only for IE (0) | 2020.12.10 |
[CSS] CSS value <revert>, CSS Property <all: revert> (0) | 2020.07.23 |
[ie11] 인터넷 익스플로러에서 grid 사용하기 (0) | 2020.07.09 |