safari IOS 메뉴 표시 줄이 화면의 10 % 아래에있는 버튼과 충돌 함

여러 플랫폼에서 기능적이고 예쁘지 않은 웹 포털을 작성 중입니다. 플랫폼 중 하나가 IOS Safari이며 문제가 발생했습니다. 내 코드에서 너비와 높이가 100 % 인 div의 하단에 두 개의 부동 버튼을 정렬합니다.이 모든 것이 잘 작동하고 버튼이 페이지 하단에 표시된 것처럼 정확하게 표시됩니다. 그러나 버튼을 클릭하면 모바일 사파리에서 전체보기로 컴팩트보기가 전환되고 내 버튼이 하단 탐색 모음 뒤에 숨겨집니다!

사용자가 화면 하단 10 %를 탭할 때 확장 된 메뉴를 표시하는 것이 Safari 모바일의 정상적인 동작입니까? 어떻게 피할 수 있습니까?

이 gif에서 당신은 IOS 시뮬레이터
에서 문제를 볼 수 있습니다 : 당신이 볼 수 있듯이 문제는 버튼이보기의 10 % 아래에있을 때만 발생합니다. 이것은 정상적인 버튼이며 내 코드는 여러 개발자가 세 번 확인했으며 오류가 없습니다.

이것은 Mobile Safari에서 정상적인 동작이며, 하단에서을 누르면 다양한 브라우저 옵션이 표시되고 그에 따라 웹 페이지가 위로 스크롤됩니다. 웹 페이지 기능은 동일하게 유지되므로 사용자는 스크롤 한 후에도 버튼을 눌러 기능에 액세스 할 수 있습니다.

답을 찾은 것 같습니다. 컨텐츠를 다음 스타일로 설정하십시오.

• height: 100% (콘텐츠가 뷰포트를 채우고 아래쪽을 넘어갈 수 있도록 허용)
• overflow-y: scroll(뷰포트 아래로 스크롤 할 수 있습니다. 기본값은입니다 visible)
• -webkit-overflow-scrolling: touch (스크롤 동작을 부드럽게하기 위해)

Safari의 iOS 메뉴가 항상 표시되도록합니다. 그렇게하면 Safari 메뉴를 여는 대신 버튼 클릭이 실제로 작동합니다. 도움이 되었기를 바랍니다!