2021.05.20

2021.05.20

🎉 TIL

1. flex-direction 속성

2. position: sticky

2.0 문제 발생: sticky 포지션으로 화면 상단에 고정시켰는데, fixed처럼 정확히 지정한 위치에 고정되어 있지않고, 스크롤 할 때마다 조금씩 흔들리는 이슈가 발생했다.

2.1 sticky로 지정하면 고정되는 위치가 어디일까?

공식 문서에 따르면 position:relative 속성과 유사하게 가장 가까운 스크롤 포트를 참조하여 위치를 계산한다.
여기에서 스크롤 포트란 overflow: auto 또는 overflow: scroll 속성이 추가된 스크롤 박스를 의미한다.

2.2 fixed와의 차이점

fixed는 뷰포트에 고정하지만, sticky는 스크롤 박스(스크롤 포트)에 고정된다.

2.3 해결!

모바일 화면을 디버깅을 할때 평소에 150%로 확대하던 것이 문제였다. 화면을 확대하거나 축소할 경우, 화면이 렌더링될 때 픽셀에 오차가 생겨서 흔들리는 이슈가 발생했던 것!!
확대를 100%로 설정하고 스크롤하니 흔들거림이 발생하지 않았다.

• 참고
  1. 레진 기술 블로그 sticky에 관련된 글
  2. w3 공식 문서
  3. 스크롤 포트