If you start scrolling the site in a mobile browser, as soon as the address bar is hidden, the vh value will be updated, and the page content will “jump” ugly.
vh is initially calculated from the current height of your browser's viewport. When you open the browser and start uploading to the site, 1vh = 1% of the screen height, minus the interface. The interface in browsers can be different, somewhere on top there is a curtain with an address somewhere below, and somewhere both above and below.
In order to get the correct viewport size regardless of the height and interface of the browsers, it is necessary to set the page's current innerHeight which takes into account the browser's interface. innerHeight must be passed to the css variable --vh, which is used in the page class
If you start scrolling the site in a mobile browser, as soon as the address bar is hidden, the vh value will be updated, and the page content will “jump” ugly. vh is initially calculated from the current height of your browser's viewport. When you open the browser and start uploading to the site, 1vh = 1% of the screen height, minus the interface. The interface in browsers can be different, somewhere on top there is a curtain with an address somewhere below, and somewhere both above and below.
In order to get the correct viewport size regardless of the height and interface of the browsers, it is necessary to set the page's current innerHeight which takes into account the browser's interface. innerHeight must be passed to the css variable --vh, which is used in the page class