Full-height sheet with scrollable content & collapsing URL bar (Chrome Android)

[rsimon]

I noticed the following issue with scroll behavior (on Chrome Android in my case):

• If I have a sheet with scrollable content, and I open the sheet to the full screen height, scrolling upwards collapses the browser URL bar.
• The sheet doesn't catch up with this height change, until after releasing the touch. Instead, the background of the page becomes visibe.
• After releasing touch, the sheet jumps upwards to fill the new height.

react-spring-bottom-sheet somehow managed to get around this. When scrolling content, it stopped the URL bar from collapsing, I believe by using the body-scroll-lock library. I tried reproducing this approach, but couldn't get it to work.

I'm wondering if you have any thoughts on/if it's possible to prevent the URL bar from collapsing when scrolling upwards on full-height sheet, thus avoiding the nasty jumping effect?

Thanks!

[woofers]

Hi @rsimon, react-sheet-slide also uses a fork of body-scroll-lock, I'm not sure if there is a way to avoid the mobile web browser behaviour of having the address bar show and hide. Certain factors on the page can influence if it occurs but as it stands there is not a lot of public documentation around how Chrome and Safari handle this.