안드로이드 크롬에서 CSS vh 단위가 이상하게 동작했던 이유 - 재그지그의 개발 블로그
재그지그의 개발 블로그
📐 안드로이드 크롬에서 CSS vh 단위가 이상하게 동작했던 이유
- 안드로이드 크롬 108 버전부터 레이아웃 표시 영역의 동작이 달라졌기 때문입니다.
---
작년에 회사에서 QA를 진행하다가 이상한 버그를 발견했습니다. 구형 안드로이드 기기에서 가상 키보드가 올라오면 CSS 단위인 vh 값이 예상과 다르게 동작하고 있었던 것이죠. 그런데 비교적 최신 기기였던 제 스마트폰에서는 정상적으로 동작하더군요.
이상하다 싶어서 원인을 찾아보니, 안드로이드 크롬 108 버전부터 브라우저가 레이아웃 표시 영역을 계산하는 방식이 바뀌었기 때문이었습니다. 제 스마트폰은 크롬 108 이상이었기 때문에 정상 동작했던 것이었죠.
솔직히 이런 변경 사항이 있었던 걸 몰랐다는 점이 꽤 충격(?)이었는데요. 그래서 이번 기회에 레이아웃 표시 영역이란 무엇인지, 그리고 크롬 108부터 기본 동작이 왜 변경되었는지 정리해 보려고 합니다.
예전에 링크드인에 짧은 글로 정리해둔 내용이었는데, 블로그에 포스트로 정리해서 공유하게 되었습니다.
https://wormwlrm.github.io/2025/03/02/Viewport-Resize-Behavior.html
다음 내용이 궁금하다면?
이미 회원이신가요?
2025년 3월 1일 오후 8:05
댓글 0
함께 읽은 게시물
실서비스에 반영할 기능을 가끔 바이브 코딩만으로 개발 해 보는데, 두어달 전만해도 어려웠던 구현이 이제 벌써 가능해졌다.
... 더 보기-
야근의 관성
제가 한국에서 직장 생활을 시작하고 가장 먼저 배운 것은 아이러니하게도 야근이었습니다. 신입이었던 제게 야근은 선택의 문제가 아니었거든요. 선배들에게 야근은 너무나 당연한 루틴이었고, 저녁 5시가 되면 "퇴근 안 해?"가 아니라 "저녁 뭐 먹을까?"라는 질문을 던졌습니다. 누가 정해놓은 것처럼 부장님이 퇴근해야 과장님이, 과장님이 퇴근해야 대리님이, 대리님이 퇴근해야 비로서 저 같은 신입도 퇴근 생각을 할 수 있었습니다.
... 더 보기무신사의 대용량 트래픽 경험기
치
... 더 보기
ML Engineer가 되기 위해 내가 1년 반 동안 했던 것들
커리어리 질문글에도 보면 일주일에 한번씩은 “ML Engineer, Data Scientist가 되고 싶은데 어떤 것부터 공부를 해야할지 모르겠다.” 는 질문이 자주 올라옵니다. 비슷한 질문이 계속 올라오는 이유는 정해진 답이 없기 때문이라고 생각합니다. 너무나도 다양한 방식으로 ML Engineer가 될 수 있기 때문에 처음 입문을 하시는 분들은 오히려 어떤 방향으로 나아갈지 몰라 갈팡질팡 하시는 것이죠.
... 더 보기“퇴사하고 싶습니다.” 최근 한 기업의 대표님이 가슴 아팠던 직원의 퇴사 이야기를 터놓았습니다. 사실 아직도 퇴사 사유를 정확히 잘 모른다고 합니다. 그 확고함에 어쩔 수 없이 보냈을 뿐. 많은 대표님이 비슷한 경험을 해봤을 것입니다.
... 더 보기
