Navigation after scroll in Chrome mobile adds blank space at the bottom of the screen

[BeeMargarida]

Current behavior

This behaviour only happens in Chrome mobile, I think it's related to the behaviour of hiding the browser top bar on scroll:

1. Open an app in Chrome mobile
2. With a screen that contains an scroll, scroll and then navigate to another screen
3. The other screen appears with a white space below with the exact same space as the browser top bar (which is not shown, since it looks like the scroll is maintained and not reset)

In the reproduction link provided, to test is better to download as a zip, install the dependencies and then run yarn web. Example of the problem using the snack provided:

https://user-images.githubusercontent.com/25725586/224362468-18b0c49d-15e1-46d8-aed0-a3b9c851d068.mov

Expected behavior

The expected behaviour would be make the screen occupy the whole height of the screen.

Reproduction

https://snack.expo.dev/@daisy112351/448299

Platform

• [X] Android
• [ ] iOS
• [X] Web
• [ ] Windows
• [ ] MacOS

Packages

• [ ] @react-navigation/bottom-tabs
• [ ] @react-navigation/drawer
• [ ] @react-navigation/material-top-tabs
• [X] @react-navigation/stack
• [ ] @react-navigation/native-stack
• [ ] react-native-tab-view

Environment

• [X] I've removed the packages that I don't use

package	version
@react-navigation/native	6.1.6
@react-navigation/stack	6.3.16
react-native-safe-area-context	4.5.0
react-native-screens	3.15.0
react-native-gesture-handler	2.9.0
react-native	0.71.4
expo	18.0.0
node	16.19.0
npm or yarn	1.22.19

[BeeMargarida]

I'll try to investigate a fix for this

[BeeMargarida]

Not really sure if this is a react-navigation issue or something related to react-native-web. Based on https://developer.chrome.com/blog/url-bar-resizing/, the correct logic is already being applied by setting the height of html and body to 100%. However, #root does not occupy that whole height. If anyone has any insight I would greatly appreciate it

[BeeMargarida]

Found a fix for it, but perhaps this should reside in react-native-web and not here (will find a place for it and perhaps close this one here). Instead of using min-height: 100%, it should set the height taking into consideration the innerHeight of the browser so that it adapts to the address bar collapse. The bug is happening because the document.body.clientHeight is different that the window.innerHeight after navigation and with the address bar collapsed.

A fix would be something like the code below:

const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
document.body.setAttribute(
  'style',
  `height: calc(var(--vh, 1vh) * 100);`
);