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,
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/
Try setting min-height: 100vh;
to html element.
html {
min-height: 100vh;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With