0
86
ViewsiOS15 Safari bottom navigation bar issue when showing modal
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,
- make modal
- insert input in modal and auto focusing it
- keypad up
- hide the keypad
- 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/
·
Santiago Trujillo
1 answers
Answer question0
Try setting min-height: 100vh; to html element.
html {
min-height: 100vh;
}
·
Santiago Trujillo
Report
Answer question