[TIL] 230109

20230109

문제점

티스토리의 스킨 기능을 통해 스킨을 꾸미면서 CSS의 border-radius 기능을 넣던 도중, 안드로이드 및 윈도우 기반의 크롬/사파리에서는 문제가 되지 않던 border-radius와 overflow-hidden 기능이 MAC / iPhone에서는 적용이 되지 않는 점을 확인했다.

시도

단순히 z-index문제라고 생각되어 적용된 모든 박스에 z-index를 수정해가며 시도해보았다.

 

하지만 결과는 실패... 처음엔 -webkit-border-radius라는것이 있나? 라고 생각되어 관련한 문서들도 찾아봤지만 그 기능은 없었다. 그러던 도중 MDN 자료의 쌓임 맥락이라는 게시글을 확인해보게 되었다.

해결방법

결론은 사파리의 렌더링 엔진인 -Webkit 버그라고 한다. 버그를 해결하기 위해서 overflow: hidden을 사용해 엘리먼트 쌓임 맥락에 포함 시키면 된다! 즉, 렌더링 계층을 불필요하게 도입 하지 않기 때문에 이 방법이 제일 좋다.

 

그렇기에 아래와 같이 쌓임 맥락을 시켜주면 되는것!

나는 css 내장 기능인 isolation: isolate를 사용하여 문제를 간단하게 해결했다.

 

.mini-card-info 박스에 hover 하게 되면 나타나는 문제이기 때문에 .mini-card-info에 아래와 같이 코드를 추가했다.

.mini-card-info {
    isolation: isolate;
}

만약 position이 absolute나 relative로 되어있다면 z-index: 0을 넣어주면 되었다.

알게된점

생각보다 -webkit 기반 브라우저에서 발생하는 오류들이 많은것을 확인했었다. 예를들어 transition이나 @keyframes을 사용할때도 윈도우나 크롬 기반으로 사용하면 제대로 적용 되지 않아서 꼭 @-webkit-keyframes를 사용한다던가, -webkit-animation을 사용하는것 처럼.

 

사파리를 크롬과 꾸준히 비교해보면서 또다른 webkit버그가 있는지 확인해야할 필요를 느꼈다.

---

참고 문헌 REFERENCE

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context