position sticky 헤더의 flickering 문제

흔들거리는 sticky 헤더

상단에 고정되어야 할 헤더가 스크롤이 움직일 때마다 흔들흔들 거렸습니다.

• 상단에 고정되어야 할 헤더가 스크롤을 움직일때마다 덜덜덜 떨리는 현상이 발생했습니다.
• 이 현상은 flickering이라는 현상이고, sticky나 fixed를 사용할 때 간헐적으로 발생하는 버그인 것 같습니다.
• 이 현상을 해결하기 위해 sticky나 fixed에 z-index를 같이 주라는 답변도 있고, 하드웨어 가속을 사용하라는 답변도 있었는데 모두 통하지 않았습니다.

 

(iOS에서는 sticky에 고질적인 문제가 있나봅니다.)

https://github.com/ampproject/amphtml/issues/18469

• jridgewell의 답변은 일부 발췌하면 position sticky의 flickering 현상은 쉽게 고쳐질 수 없는 것이 아니라고 합니다.
• 그런데 의외의 방법을 통해 이 버그가 해결되었습니다.

 

width를 수정하니 flickering이 고쳐졌다?

.header {
  height: 60px;
  position: sticky;
  width: 100%; // width: 100vw에서 100%으로 전환
  background-color: var(--header-bg);
  z-index: 100;
}

• 약간 말도 안되지만 개발 도중 width를 고치니 갑자기 flickering 문제가 사라졌습니다.
• 왜 해결이 되었는지 궁금하긴 하지만... 일단 width를 통해서도 고쳐질 수 있구나 라고 개인적으로만 알고 있어야 겠습니다.

 

mdn에서 추천하는 방법) will-change : transform

https://developer.mozilla.org/ko/docs/Web/CSS/will-change

will-change - CSS: Cascading Style Sheets | MDN

• 그래도 정석적인 방법은 있습니다.
• 오류가 해결되어서 이것을 당장 실험할 수는 없지만, will-change 프로퍼티를 sticky나 fixed에 달아주면 flickering이 해결될 듯 합니다.
• mdn에서는 fixed나 sticky가 달린 요소들은 스크롤이 조절될때마다 새로운 위치에 페인트 되어야 하는데, 브라우저의 성능 등 기타 상황에 따라 60 fps를 유지하지 못하면 UX 악화가 생긴다고 합니다.
• 이 문제의 해결책으로 sticky나 fixed 요소에 will-change : transform 을 추가하면 브라우저가 해당 요소가 자주 변화된다는 것을 인지해서 적절하게 최적화할 수 있다고 설명합니다. 

 

sticky, fixed 그리고 flickering이라는 키워드

• 이번 이슈를 통해 sticky에 대해 조금 더 공부를 하게 되었습니다.
  sticky는 처음에 relative로 존재하다가 설정한 높이가 되면 fixed로 고정되는 프로퍼티입니다.
• 그리고, sticky는 상위 요소에 관계없이 본인에게 주어진 공간을 모두 활용하는 반면,
  fixed는 상위 요소에 따라 본인의 크기를 재설정합니다. 즉 상위 요소에 대한 정보가 필요합니다.
• 이번 이슈를 통해 sticky, fixed에는 flickering이라는 이슈가 있음을 알게 되었고, 브라우저는 최적화를 위해 다양한 프로퍼티를 제공하고 있음을 알게 되었습니다.
• 다음번에 이 오류를 또 만나면 will-change를 도입해보아야 겠습니다.