모바일 웹 - 가상키보드로 인한 화면 밀림 해결

개발한 모바일 웹의 페이지에서 특정 버튼 클릭 시

input을 포함하고 있는 레이어가 하단에서 위로 슬라이드는 상황

 

input을 포함하고 있는 해당 레이어는 

order-radius: 16px 16px 0 0;
width: 100%;
height: auto;
position: absolute;
bottom: -542px;
background: #ffffff;
box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.25);
transition: all 0.4s ease-in-out;

이렇게 적용되어 있는 상태였고 레이어 오픈 시 

bottom: 0;

 

위의 값이 추가되는 상황이었음.

 

그런데 안드로이드 폰에서 input에 커서를 활성화했을 때 가상키보드가 생성되면서

레이어가 위로 밀리게 되었고, 밀린 레이어가 스크롤을 먹지 않아 상단에 있던 input 폼이 가려진 현상이 발생함.

 

검색해보니 가상 키보드를 인식할 수 있는 이벤트를 적용할 수 있다고들 하던데

프로젝트가 vue로 진행되고 있었고 이렇다할 이벤트를 적용하기 전 css로 먼저 상황해결을 시도해봄.

 

order-radius: 16px 16px 0 0;
width: 100%;
height: auto;
max-height: 100%;
overflow-y: scroll; 
position: fixed;
bottom: -542px;
background: #ffffff;
box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.25);
transition: all 0.4s ease-in-out;

디폴트 상태의 css를 위와 같이 변경해줘서 간단히 해결함.

하하하.