[fix] 앱에서 키패드 올라올 때 이슈

[Ssoon-m]

ios 브라우저 키패드 이슈로 ui 인해 개선필요

아래 사진과 같이 form바로 아래에 button을 붙이는 방식으로 ui를 개선해야할 거 같습니다.

변경해야하는 이유

ios 사파리 브라우저의 keypad동작 이슈와 웹 특성상 keypad를 매끄럽게 조작하기 어려운 이슈가 있어서 변경을 하면 좋을거 같다고 생각을 했습니다.

ios 사파리 브라우저의 keypad 동작 이슈

기존 방식대로 button을 bottom fixed로 처리할 경우 안드로이드에서는 키패드위에 버튼이 정상적으로 붙어서 나오지만, ios 사파리에선 키패드가 올라와도 화면 하단에 붙어있습니다.

ios 사파리 키패드 활성화시 동작과정

• keypad가 올라올 경우 position fixed가 마치 static처럼 동작한다.
• input focus시 해당 요소로 스크롤처리가 된다.
• 스크롤을 맨 아래까지 했을 경우 html문서에 속하지 않는 영역이 생긴다.
• safari 브라우저는 휴대폰에서 키패드가 열릴 때 레이아웃의 크기를 조정해주지 않는다.

키패드 위에 버튼이 붙게끔 하기 위해 레이아웃의 크기를 강제로 조절해서 구현을 해보려고 했습니다.

💡 모바일 브라우저에서는 layout viewport와 visual viewport가 있습니다.

• layout viewport : 고정된 화면
• visual viewport : 사용자의 액션에 따라 영향을 받는 화면이다. (키패드 활성화나 손가락으로 화면 확대)

아래 사진은 키패드가 활성화 됐을 때 visual viewport가 변경될 경우 전체 높이에서 키패드 높이를 제외한 height를 설정한 모습입니다.

button이 키패드가 올라올 경우 키패드 위에 붙어서 나오긴 하지만, iphone 15 pro나 다른 기종에선 키패드가 올라왔을 경우 visual viewport가 비교적 작기 때문에 로그인 버튼이 키패드에 의해 가려집니다.

ios 사파리 브라우저에서 키패드 위에 버튼이 붙어서 보이게끔 구현을 해보려고 노력을 했지만, 위와 같은 이슈가 존재했습니다.

웹 특성상 keypad를 매끄럽게 조작하기 어려운 이슈

안드로이드에서 이메일 input에 focus시 로그인 버튼 때문에 비밀번호 input창이 가려지는 이슈가 있습니다.

아래와 같이(토스의 내정보 수정) 네이티브단에선 키패드가 인풋창을 가릴경우 스크롤을 매끄럽게 조절을 해줄수가 있는데, 웹에선 그러한 조절이 어렵습니다.

KakaoTalk_Video_2024-04-21-17-28-21.mp4

결론

현재 ios와 안드로이드웹에서 모두 대응하기 힘든 ui라고 생각합니다.

위의 펫프렌즈 예시 처럼 form바로 아래에 button을 붙이는 형태면 ios를 대응하기 위한 별도의 코드 없이 ios와 안드로이드 모두 동일한 결과를 보여줄 수 있을거 같습니다.

[tolluset]

pichillilorenzo/flutter_inappwebview#1947

비슷한 이슈 찾았습니당..