I'm creating a WebApp with ReactJS. My basic page template is like desktop Spotify display: a left sidebar, audio player fixed at the bottom, and page content in the rest (i call it wrapper).
I was first thinking to put the sidebar and player in position: fixed, but I choose to create a flex template and the wrapper with overflow: auto to simulate the default page scrolling. And then I added this CSS:
html, body, .page {
height: 100%;
}
And it is working well except on iPhone Safari. (iPhone X - iOS 13.4.1) When I load the page, it's fine, when I rotate in landscape, it's still fine, but when I come back in portrait, the bug occurs, because the site thinks the Safari bottom bar is still showing, but it's not, and that left a white blank space at the bottom of the app.
The actual solution i founded is to use 100vh instead of 100%, but the player is now showing below the Safari bottom bar, so it's not really working either...
I'm using ReactJS as framework. Is there any way to fix that issue ?
Thanks.