EDIT: SOLVED
The issue was caused by background-attachment: fixed, which is poorly supported and causes rendering glitches on mobile browsers (like the "red space" or background jumping).
The Solution: I replaced the background on the body with a ::before pseudo-element. Using position: fixed and min-height: 100lvh allows the background to stay fixed without breaking the layout when the browser UI (navigation bar) scales.
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
