안드로이드 크롬에서 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
함께 읽은 게시물
알아서 알아주지 않는 시대
‘낭중지추(囊中之錐)’라는 말이 있다. ‘주머니 속의 송곳’이라는 뜻으로, 역량 있는 인재는 결국 눈에 띄기 마련이라는 말이다. 참 좋은 말이고, 자신의 역량을 높이는 데 집중하라는 용도로 지금도 종종 쓰인다. 그런데, 이 말에 약간의 함정이 있다.
... 더 보기서버 과부하를 프론트엔드에선 어떻게 대처하는게 좋을까요?
서
... 더 보기이직 준비는 입사할 때부터 해야 합니다.
보통 이직준비, 취업준비라고 하면 1~2달 정도 이력서를 다듬고 면접준비를 하는 것을 일컫더라고요.
... 더 보기AI 시대에 고퀄리티 개발 컨텐츠 공유 서비스를 만든 이유와 과정
저
... 더 보기
