jank 1 썸네일형 리스트형 문제 해결 2021.06.24 css 애니메이션 버벅거림(jank)해결하기 1편 오늘의 문제 내가 한땀한땀 예쁘게 만든 애니메이션... 코드는 문제 없는데, 실제 화면에서는 왜 덜덜덜거릴까? See the Pen jank-animation-before by ylem76 (@ylem76) on CodePen. 후후... 임베드한 코드펜에서는 왜 멀쩡해보일까? ^^... 이런 걸 뭐라고 하나요? css를 이용해 애니메이션을 구현하다보면 예상치 못하게 덜덜덜 거리는 걸 볼 수 있다. 이런 문제를 두고 쟁크(jank)라고 하고, 브라우저 렌더링 단계 중 리플로우(레이아웃)와 관계가 있기 때문에 리플로우라고 검색해도 관련 내용을 찾을 수 있다. 원인 화면 주사율 스크린 기기는 1초에 화면을 60번씩 그린다. (화면주사율이 60Hz이라는 뜻은 이걸 말한다.) 스크린 기기는 1초에 60번을 그리.. 이전 1 다음