苹果浏览器的IOS菜单栏与屏幕下方10％的按钮发生冲突

我正在构建一个必须在多个平台上正常运行的Web门户。其中一个平台是IOS Safari，这是我遇到的问题。在我的代码中，我将两个浮动按钮对齐到div的底部，宽度和高度为100％。这一切都很好，并且按钮的显示效果与页面底部的显示效果完全相同。但是，当我单击按钮时，从移动浏览器的紧凑视图将切换为完整视图，并且我的按钮隐藏在底部导航栏的后面！

在用户点击屏幕底部10％时，safari mobile显示扩展菜单是否正常？如何避免这种情况？

在此gif中，您可以在IOS模拟器上看到问题：
如您所见，仅当按钮位于视图的下10％时，才出现问题。这只是一个普通的按钮，几位开发人员对我的代码进行了三遍检查，没有错误。

在Mobile Safari中，这是正常现象，点击底部将显示各种浏览器选项，并相应地向上滚动网页。网页功能保持不变，因此用户在滚动按钮后仍可以点击按钮以访问其具有的任何功能。

我想我可能已经找到了答案。将您的内容设置为具有以下样式：

• height: 100% （允许内容填充视口并超出底部）
• overflow-y: scroll（允许您滚动到视口下方；默认值为visible）
• -webkit-overflow-scrolling: touch （以平滑任何滚动行为）

似乎会强制Safari中的iOS菜单始终显示。这样，单击按钮实际上将起作用，而不是打开Safari菜单。希望这可以帮助！