iOS15 Safari bottom navigation bar issue when showing modal

user_7029796 0
Viewed 1823

I faced an issue when I updated the iOS to version 15 on iPhone. And I found that Safari hide the navigation bar when I scroll down the page. It is ok, but the issue come when I open a modal.

When I open modal with following well known style

.modal {
  position: absolute; /* or fixed */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* following is what I tried to, but not work */
  width: 100vw;
  height: 100vh;
}

with

<body>
  ...
  <div class="modal">...</div>
</body>

, the bottom navigation bar area has been empty and filled with Website Tinting color, applied in iOS15. To reproduce this issue,

  1. make modal
  2. insert input in modal and auto focusing it
  3. keypad up
  4. hide the keypad
  5. navigation bar is downsized and the navigation bar area is still positioned with Tinting color.

I attach an image for it and question link related to this question.

https://lzomedia.com/blog/modal-wont-resize-when-ios-15-safaris-navbar-expands/

enter image description here

ios15 css html
1 Answers

Try setting min-height: 100vh; to html element.

html {
  min-height: 100vh;
}
user_55706900
Related