Проблема с модальными окнами веб-сайтов на iOS 26 с морозным дизайном ⇐ Html

[Anonymous]

Как решить проблему с новым дизайном Frosty iOS?
Модальные окна, которые раньше прикреплялись к нижнему краю экрана или панели iPhone, теперь нависают над новой прозрачной панелью, что выглядит, мягко говоря, не очень хорошо.
Как переместить модальное окно вниз под панель навигации iPhone?
Снимок экрана
В моем случае модальные окна позиционируется с помощью CSS с позиции: фиксированной; верх: 0; внизу: 0;.





Document

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;
}




Open modal




x

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.







Подробнее здесь: https://stackoverflow.com/questions/798 ... sty-design