React-slick 에러 깜빡이는 현상 해결하기

 

 

react-slick 너무나도 간단하고 편리한 라이브러리이지만,

최근 처음보는 현상을 발견했다.

react-slick을 사용한 베너에서
마지막 슬라이드에서 처음 슬라이드로 돌아갈때 깜빡이는 현상이 발견된 것!

settings 에 useTransform false 를 준 후,

const settings = {
  	...
    useTrasform: false,
  };

 

아래와 같은 css 를 추가해서 개선해주었더니 해결완료!

 // react-slick error fix css
  .slick-slide,
  .slick-slider .slick-track,
  .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);

    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }

 

 

굉장히 오래전부터 공식적으로 이슈제기를 해왔던 것 같은데

react-slick 측에서는 아직까지 해결이 안된 모양이다.

 

https://github.com/kenwheeler/slick/issues/1890