Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS15 Safari bottom navigation bar issue when showing modal

Tags:

html

css

ios15

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

like image 359
wallah Avatar asked Nov 14 '22 18:11

wallah


1 Answers

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

html {
  min-height: 100vh;
}
like image 76
ysjn Avatar answered Dec 22 '22 01:12

ysjn