iOS Safari landscape scrolling changes bottom position

Question

I am working in ReactJS. I have a menu bar of sorts on mobile that has position: fixed and bottom: 0. It sits stuck to the bottom of the page in portrait and landscape in all browsers except Safari.

In portrait, it works just fine. When you switch to landscape it sits in the right spot, until you scroll the page down. When safari drops the search menu, it pushes the menu bar below the screen. To me (given the position of the menu bar hasn't changed) it seems that the search menu dropping is moving the bottom of the document below the screen. From all my searching, I also haven't seen any fixes to this, it seems like this is just the way Safari is. Anyone have any suggestions?

Here is the relevant component: https://github.com/Taouen/gobble/blob/master/src/components/MobileBox.js

Answer 1

It may be your use of vh that is causing the problem.

Safari on IOS uses a value of vh that is 1% of screen height (i.e. it is a fixed value whether or not the search bar is showing at the top). This is so there isn't an 'uncomfortable' jump as the user scrolls down and the search bar disappears.

see for example: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

which has a workaround where you use --vh, defined as one hundredth of window.innerHeight, instead of vh.

(This should probably be a comment to the original question as it's not a full, tested answer, but I don't have enough reputation to make a comment, sorry)