iOS Safari에서 키보드 열릴 때 하단 영역 아래 빈 공간이 생기는 문제 (React + Tailwind)

Question

안녕하세요, React + Tailwind로 개발 중인데 iOS Safari에서만 발생하는 레이아웃 문제를 해결하지 못해 도움을 요청드립니다.1. DOM 구조

{/* 내용 입력 */}

{/* 하단 영역 */}

2. 문제 상황- iOS에서

에 입력하려고 키패드를 띄운 후, 스크롤을 내리면 하단 fixed 영역 아래에 빈 공간이 생깁니다.- 해당 빈 공간은 DOM 요소가 아니라, iOS Safari에서만 나타나는 현상으로 보입니다.- 안드로이드/데스크탑 브라우저에서는 재현되지 않습니다.3. 시도한 방법- min-h-svh 대신 --vh 변수를 계산해서 적용해봤지만 동일한 현상 발생4. 질문- 이 현상이 iOS Safari의 뷰포트/키보드 버그 때문인지, 제가 DOM/CSS 구조를 잘못 짠 건지 알고 싶습니다.- 혹시 비슷한 문제를 겪어보신 분이 있다면 해결 방법이나 우회 방법을 공유해주시면 감사하겠습니다.

catcode · Answer

Ios26 이신가요 해당 버전 버그가 있다고 하던데

파아란_푸딩 · Answer

안녕하세요, 해당 문제에 대해서 조금 찾아봤는데요.iOS Safari는 input focus 상태에서 position: fixed를 position: static으로 취급하는 고질적인 문제가 있다고 하네요.대표적인 해결책으로는 position: fixed 를 쓰지 않는다.또는 스크롤 시 키보드를 강제로 닫는다.참고 자료 :https://stackoverflow.com/a/56460431https://medium.com/@im_rahul/safari-and-position-fixed-978122be5f29Reddit | OS Safari: Bug or "Feature"? (position: fixed & scrollIntoView not working) (videos attached)Reddit | On iOS Safari, whenever the keyboard opens up for form input, a big empty space appears at the bottom of the page

iOS Safari에서 키보드 열릴 때 하단 영역 아래 빈 공간이 생기는 문제 (React + Tailwind)

2개의 답변

#tailwind-css 목록