사파리 브라우저에서 border-radius에 overflow:hidden 적용 안되는 이슈, 버그(?)

글 작성 당시 웹, 모바일 모두 해당하는 사항이었습니다.

    

이게 정상적인 모습인데, 사파리에서만 확인이 되는 부분이었습니다.

아래와 같이 라운드처리가 된 부분이 가려지지 않고 튀어나와있습니다.

 

border-radius가 적용된 부분이 overflow:hidden이 안되는 모습입니다.

 

css 적용 사항입니다.

첫번째로 든 의심은 특정 가상 선택자의 버그인가 생각이 들어서

:before -> :after로 변경해봤습니다. (X)

하위 엘리먼트의 가상선택자로도 변경해봤습니다. (X)

 

두번째는 가상선택자 버그인가 싶어서 태그로 변경했습니다. (X)

 

세번째는 border-radius를 다른 객체들에게도 줘봤습니다. (X)

 

네번째로 position:absolute를 relative로 변경했습니다.(X)

 

결론은 모두 원인이 아니었습니다.

이유가 뭐지 한참 고민하며 만져보던 중에 position값의 문제임을 알게되었습니다.

해결책으로는 동그라미의 위치를 맞추기 위해 넣었던 position값을 제거 하고 margin 값으로 변경했습니다. (O)

 

그러던 중에 가운데로 맞추는게 쉽지않고, 해당 객체 크기가 달라지만 margin 값은 의미가 없어질 것 같아서(가운데 맞추는 데 필요했습니다)

transform으로 변경하였습니다. (X)

 

.............. 

원하는 결과를 얻기 위해서는 margin 값만이 허용되었습니다.

저만 이런 문제가 생긴것 일리도 없는데, 검색해도 안나와서 잘 모르겠습니다....

 

아시는 분은 알려주세용..