Sticky로 헤더 화면을 고정하는 앱을 개발하는 중 Chrome 브라우저에서 스크롤 시 헤더가 흔들리는 flicker 현상을 발견했다.

css 오류인가 해서 마크업 개발자 분과 대화를 나누다가 크로스 브라우징 체크를 해보니 Chrome에서만 이런 현상이 발생하고 있었다.

결론부터 말하자면, 원인은 크롬 브라우저의 Smooth Scrolling 기능 때문이었다.

해결 방법.

크롬 브라우저 url 검색창에 아래 url 입력

chrome://flags/

Ctrl + f 찾기를 이용해 ”smooth”를 검색하면

크롬 브라우저 기본 설정으로 Smooth Scrolling이 설정 되어있다.

위 Default를 Disabled로 변경 후 크롬 브라우저를 재시작하면 flicker 현상이 사라진다.

단, 크롬 스크롤이 부자연스러워진다.