728x90
개발한 모바일 웹의 페이지에서 특정 버튼 클릭 시
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를 위와 같이 변경해줘서 간단히 해결함.
하하하.
'css' 카테고리의 다른 글
flex with text-overflow: ellipsis (0) | 2021.12.08 |
---|---|
noto sans kr - cdn (0) | 2021.11.30 |
background-clip (0) | 2021.11.18 |
nth-child (n번부터 n번째까지) (0) | 2021.11.11 |
[Chrome] input 자동완성 시 채워지는 배경 색상 글자 색상 변경하기 (0) | 2021.10.14 |