I'm currently using ReactJS and have implemented a mobile menu bar with CSS properties position: fixed and bottom: 0. The menu bar stays locked at the bottom of the page in both portrait and landscape orientations on all browsers except for Safari.
In portrait mode, everything works as expected. However, when switching to landscape, the menu bar is positioned correctly until the page is scrolled down. When Safari removes the search menu, it causes the menu bar to be pushed below the visible screen area. It appears that the removal of the search menu is shifting the bottom of the document off-screen. Despite extensive research, I haven't come across any solutions for this issue, indicating that this behavior may be specific to Safari. Does anyone have any suggestions or fixes?
For reference, here is the relevant component: https://github.com/Taouen/gobble/blob/master/src/components/MobileBox.js