Problem mit modalen Fenstern von Websites unter iOS 26 mit frostigem Design ⇐ HTML

[Anonymous]

Wie kann ich das Problem mit dem neuen Frosty iOS-Design lösen?
Modale, die früher am unteren Rand des Bildschirms oder der iPhone-Leiste klebten, schweben jetzt über der neuen transparenten Leiste, was, gelinde gesagt, nicht sehr gut aussieht.
Wie verschiebt man das Modal nach unten unter das iPhone-Navigationsfeld?


In meinem Fall werden modale Fenster mithilfe von CSS mit position: behoben; oben: 0; unten: 0;.

Code: Select all

body {
padding: 12px;
background-color: blue;
}

.btn {
color: blue;
text-decoration: none;
padding: 12px;
text-align: center;
border-radius: 8px;
background-color: white;
}

.modal {
display: none;
}

.modal:target {
display: flex;
flex-direction: column;
justify-content: flex-end;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.2);
}

.modal-content {
position: relative;
border-radius: 8px 8px 0 0;
background-color: white;
padding: 48px 12px 12px;
}

.modal-close-btn {
color: black;
font-size: 32px;
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
text-decoration: none;
}

Code: Select all

[url=#myModal]
Open modal
[/url]


[url=#]
x
[/url]
Some content
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.