8

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

wallah
  • 1,964
  • 5
  • 27
  • 48

1 Answers1

2

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

html {
  min-height: 100vh;
}
ysjn
  • 378
  • 3
  • 11
  • Can you provide an example? This doesn't seem to work. – davidwebca Jan 26 '22 at 19:47
  • Hi @davidwebca Try this code sandbox in iOS15 Safari. https://2hs9s.csb.app/ ( Code https://codesandbox.io/s/ios15-fullscreen-modal-bug-2hs9s?file=/src/App.js ) – ysjn Jan 27 '22 at 04:48
  • Doesn't work. There has to be something else to be done for this to work – hurrii Feb 16 '22 at 19:27