How can I remedy the issue with the brand new Frosty iOS design?
Modals that used to stay to the underside fringe of the display screen or the iPhone’s bar now hover over the newly clear bar, which does not look superb, to place it mildly.
Easy methods to transfer the modal down underneath the iPhone navigation panel?
In my case, modal home windows are positioned utilizing CSS with place: mounted; high: 0; backside: 0;.
physique {
padding: 12px;
background-color: blue;
}
.btn {
colour: blue;
text-decoration: none;
padding: 12px;
text-align: middle;
border-radius: 8px;
background-color: white;
}
.modal {
show: none;
}
.modal:goal {
show: flex;
flex-direction: column;
justify-content: flex-end;
place: mounted;
high: 0;
proper: 0;
backside: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.2);
}
.modal-content {
place: relative;
border-radius: 8px 8px 0 0;
background-color: white;
padding: 48px 12px 12px;
}
.modal-close-btn {
colour: black;
font-size: 32px;
place: absolute;
high: 12px;
proper: 12px;
width: 32px;
peak: 32px;
text-decoration: none;
}<a category="btn" href="#myModal">
<span>Open modal</span>
</a>
<div class="modal" id="myModal">
<div class="modal-content">
<a href="#" class="modal-close-btn">
x
</a>
<h2>Some content material</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus veniam ipsam, sequi, odio totam culpa delectus quam facilis, pariatur accusantium optio est excepturi corrupti numquam tempora? Odit vero consectetur exercitationem.</p>
</div>
</div>
<!-- The overlay does not attain right here on iOs 26 on iPhone, and we see the location content material, whereas the content material of the modal window is above the clear browser management bar -->
