Chrome 브라우저에서의 transition 속도 저하 이슈

issue

safari 웹과 모바일에서는 속도 저하 문제가 나타나지 않았다. 처음에는 react-spring 라이브러리의 고질적인 문제인 줄 알았는데 해당 라이브러리 공식 문서와 깃헙 이슈 탭에서 같은 문제가 있는 사람이 있는지 찾아보았는데 전혀 없었다.. 결국 알게 된 사실은 단순히 chrome에서만 발생하는 이슈였다.

 

- chrome에서만 속도 저하 문제(버벅거리는 현상)가 발생

transition 시간을 줄였을 때, 해당 타겟에서 버벅거리는 현상이 생겼다.

 

transition: '0ms ease-out'

 

 

- 하단 스타일 코드 추가시 버벅거리는 현상이 생기지 않고 부드러운 애니매이션을 구현할 수 있었다.

 

backfaceVisibility: 'hidden',
perspective: 1000,

 

 

* 참고자료 

 

Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?