问题描述
我在ReactJS中工作。我在移动设备上有一个具有position: fixed和bottom: 0的菜单栏。在除Safari之外的所有浏览器中，它都以纵向和横向固定在页面底部。
在纵向模式下，效果很好。切换到横向时，它将位于正确的位置，直到向下滚动页面。野生动物园放下搜索菜单时，它将菜单栏推到屏幕下方。对我而言（鉴于菜单栏的位置没有更改），似乎下拉的搜索菜单正在将文档底部移动到屏幕下方。从我所有的搜索中，我还没有看到对此的任何修复，似乎这只是Safari的方式。有人有建议吗？
以下是相关组件：https://github.com/Taouen/gobble/blob/master/src/components/MobileBox.js
解决方法
可能是您使用vh导致了问题。
IOS上的Safari使用的vh值为屏幕高度的1％（即，无论搜索栏是否显示在顶部，它都是一个固定值）。这样一来，当用户向下滚动且搜索栏消失时，不会出现“不舒服”的跳转。
例如参见：https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
有一种解决方法，您可以使用--vh（而不是vh）定义为window.innerHeight的百分之一。
（这可能是对原始问题的评论，因为它不是完整的，经过测试的答案，但是抱歉，我没有足够的声誉来发表评论）