[CSS] safari에서 transition 오류가 날 때 해결 방법

 

 

핸드폰은 안드로이드이기에 safari를 전혀 사용하지 않고,

데스크탑은 Mac을 사용하지만 평소에는 크롬을 99.9% 이용하기에

블로그 스킨을 바꾸고서 safari에서 transition 때문에 오류가 나는 걸 모르고 있었다.

 

 

문제의 transition 오류는 바로 이 부분.

 

각 게시글에 마우스를 올리면 해당 썸네일의 이미지가 transform: scale(1.1);이 되는데

이미지를 부드럽게 커지게 하기 위해 transition: all .5s;를 적용했다.

한편 썸네일에는 border-radius: 50px 50px 0 50px;이 적용한 상태였는데

이렇게 마우스를 hover할 때마다 테두리의 border-radius가 잠깐 사라지는 것이다.

 

 

보통 이런 문제가 생겼을 때 가장 보편적인 해결 방법으로는

transition 대상에 all 대신 scale로 transition을 적용할 대상을 특정하는 방법이 있는데

그걸로 해결됐다면 괜히 구글링 해가면서 고생할 일이 없었기에

이런 포스팅거리도 되지 않았을 것이다.

(transition: scale .5s;로 했을 땐 깜빡거림은 커녕 transition이 아예 작용하지 않는다.)

 

 

 

 

우선 지금 사용하는 티스토리의 북클럽 스킨은 게시글이 이런 구조로 되어있다.

 

지금 span.thum에는 overflow: hidden;이 적용되어 있음에도 불구하고

 hover할 때마다 그 자식 요소인 <img>가넘쳐 흐르는 상태인 것이다.

(참 말을 안 듣는 자식인가보다.)

 

 

일단 첫번째 방법(transition 대상 특정하기)은 실패했기 때문에 다른 방법을 찾아봤더니

방법 1. -webkit-transition: -webkit-transform .5s; 처럼 기술하기

방법 2. -webkit-backface-visibility: hidden; 넣기

방법 3. -webkit-transform: translate3d(0, 0, 0); 넣기

를 찾았다.

 

우선 첫번째 방법도 실패.

두번째 방법도 실패.

마지막 방법 3에서야 오류를 해결했다.

 

처음엔 이것도 <img>에 추가해서 안 되는 줄 알았는데

<img> 대신 span.thum에 넣었더니 아주 간단하게 해결됐다.

 

해결!