Я нашел несколько результатов по этой проблеме, но ни один из них не решил проблему с экранами, у которых контент короче и выше высоты экрана.
Короче говоря, у меня есть такой макет:
*Заголовок 1004 *
необходимо исправить, поэтому при прокрутке содержимого заголовок должен быть виден постоянно.
, если содержимого меньше высоты элемента содержимого, элемент содержимого должен растягиваться до нижней части экрана, и прокрутка не должна быть возможной (в настоящее время при быстрой прокрутке внизу появляются дополнительные пробелы).
(самая интересная часть), когдамобильное сафари показывает / скрывает / расширяет / сжимает свои элементы пользовательского интерфейса (адресная строка, нижние панели инструментов). Прокрутка должна вести себя "нормально" (я знаю, что это трудно описать, но в настоящее время элементы получают странные смещения).
Я читал, что это связано с использованием vh единиц, но даже если я их вообще не использую и не использую проценты, он все равно ведет себя странно, когда safari расширяет / сжимает область просмотра size при прокрутке.
Вопрос в том, есть ли какое-нибудь решение, предназначенное только для css, для обеспечения постоянного опыта вертикальной прокрутки в мобильном сафари?
PS.Если веб-приложение добавлено на домашний экран и открывается в полноэкранном режиме, все работает как положено.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
-webkit-tap-highlight-color: transparent;
}
html, body {
height: 100vh;
width: 100%;
/*overflow-y: hidden;*/
}
body {
font-size: 12px;
background: red;
}
#root {
height: 100%;
}
.page-wrapper {
height: 100%;
min-height: 100%;
}
.navigation__wrapper {
position: sticky;
top: 0;
margin: 0;
z-index: 3;
font-size: 19px;
padding: 0 15px;
height: 50px;
color: #fff;
display: flex;
align-items: center;
background: blue;
width: 100%;
}
.content__wrapper {
background: #fff;
min-height: calc(100% - 50px);
}
</style>
</head>
<body>
<div id="root">
<div class="page-wrapper">
<div class="navigation__wrapper">
Header
</div>
<div class="content__wrapper">
content
</div>
</div>
</div>
</body>
</html>