🐞 Android Chrome에서 CSS vh가 이상하게 동작했던 이유

- Android Chrome 108버전부터 레이아웃 표시 영역의 동작이 달라졌기 때문입니다. --- 몇 달 전, 회사에서 QA를 쳐내다가 이상한 버그를 발견했습니다. 유독 구형 안드로이드 기기에서 가상 키보드가 올라오면 CSS 단위인 vh가 이상하게 설정되고 있었기 때문입니다. 비교적 최신 기기였던 제 스마트폰에서는 정상 동작하구요. 이상하다 싶어서 원인을 찾아 봤는데, 알고 보니 크롬 108버전부터 브라우저가 레이아웃 표시 영역을 계산하는 방법이 달라졌기 때문이었습니다. 모바일 웹을 개발해보신 프론트엔드 개발자라면 아시겠지만, 모바일 브라우저에서는 화면에 보여지는 영역을 정확히 계산하는 것이 생각보다 쉽지 않습니다. 브라우저의 주소창, 가상 키보드의 영역, 핀치 줌을 이용한 화면 확대 등 다양한 요소로 인해 눈에 보이는 영역과 실제 계산된 영역이 다르게 나오기 때문입니다. 108 버전 미만의 크롬은 눈에 보이는 영역과 실제 레이아웃 영역의 크기가 동일했습니다. 즉, 가상 키보드가 떠올라서 눈에 보이는 화면이 줄어든다면 vh의 단위 크기도 줄어드는 것이었죠. 하지만 iOS, iPadOS에서의 크롬은 가상 키보드가 떠올라도 vh의 단위 크기가 줄어들지 않습니다. 눈에 보이는 영역이 줄었다고 해도, 실제 vh는 가상 키보드가 없었을 때의 높이를 그대로 계산하는 것이죠. 물론 이러한 문제를 해결하기 위해 dvh, svh 같은 CSS 단위가 생기긴 했지만, 구형 브라우저에서는 동작하지 않으므로 지원해야 하는 브라우저 범위가 넓은 경우에는 사용하기 어렵습니다. 이처럼 동일한 코드가 OS에 따라 서로 다르게 동작하는 문제가 있었기 때문에, 크롬 108버전부터는 크롬이 iOS의 동작을 그대로 따라가게 되었습니다. 즉 눈에 보이는 화면 크기가 줄더라도 레이아웃 영역 계산에 영향을 주지 않게 되었습니다. 이것이 바로 구형 기기에서만 문제가 발생했던 원인이었습니다. 혹시라도 여러분이 웹 개발 도중 구형 안드로이드 기기의 크롬에서만 뷰포트 관련 문제가 발생한다면, 이를 근거로 문제의 원인을 찾아보세요. https://developer.chrome.com/blog/viewport-resize-behavior?hl=ko#opting-in-to-a-different-behavior