Dvh zählt das Android-Navigationsmenü? [geschlossen] ⇐ CSS

[Anonymous]

BEARBEITEN: GELÖST
Das Problem wurde durch „background-attachment: behoben“ verursacht, das schlecht unterstützt wird und zu Rendering-Störungen in mobilen Browsern führt (wie „roter Raum“ oder Hintergrundspringen).
Die Lösung: Ich habe den Hintergrund auf dem Körper durch ein ::before-Pseudoelement ersetzt. Durch die Verwendung von position: Fixed und min-height: 100lvh bleibt der Hintergrund fixiert, ohne dass das Layout beschädigt wird, wenn die Browser-Benutzeroberfläche (Navigationsleiste) skaliert wird.

Code: Select all

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