РЕДАКТИРОВАНИЕ: РЕШЕНО
Проблема была вызвана фоновым прикреплением: исправлено, которое плохо поддерживается и вызывает сбои рендеринга в мобильных браузерах (например, «красное пространство» или скачок фона).
Решение: я заменил фон в теле псевдоэлементом ::before. Использование позиции: фиксированной и минимальной высоты: 100lvh позволяет фону оставаться фиксированным, не нарушая макет при масштабировании пользовательского интерфейса браузера (панели навигации).
I adapted the layout of the site for mobile. There was a problem, for some reason, `dvh` does not consider the android navigation menu (it must be transparent, no `red`.). I added `color: red` to the body background so that it was visible (I attached the photo below). And from time to time, when scrolling down, the browser seems to take the page and lift it up, creating a body color space at the bottom, until the scroll ends . How to fix it?
~~~css
body {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
background: none;
}
body::after {
content: "";
position: fixed;
inset: 0;
width: 100vw;
height: 100dvh;
min-height: 100dvh;
background-image: url('/boris.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -2;
}
body::before {
content: "";
position: fixed;
inset: 0;
width: 100vw;
height: 100dvh;
min-height: 100dvh;
background-color: rgba(0, 0, 0, 0.55);
z-index: -1;
}
~~~
[image][1]
[1]: https://i.sstatic.net/YFU1XPdx.jpg
Подробнее здесь: https://stackoverflow.com/questions/798 ... ation-menu
