与页面底部对齐的按钮与移动Safari的菜单栏冲突

Question

我正在构建一个Web门户,它必须在多个平台上实现功能.
其中一个平台是IOS Safari,这是我遇到的问题.
在我的代码中,我将两个浮动按钮对齐到div的底部,宽度和高度均为100%.
这一切都正常,我的按钮显示的颜色与页面底部的按钮完全相同.
然而,当我点击按钮时,移动safari中的紧凑视图切换到完整视图,我的按钮隐藏在底部导航栏后面!

当用户点击屏幕底部10%时,safari mobile显示扩展菜单是否正常？
我怎么能避免这个？

在这个gif中你可以看到IOS模拟器上的问题:

正如您所看到的,仅当按钮位于视图的较低10%时才会出现问题.这只是一个普通的按钮,我的代码被几个开发人员三重检查,并且没有错误.

Answer 1

我想我可能找到了答案.将内容设置为具有以下样式:

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

似乎强制Safari中的iOS菜单始终显示.这样,按钮点击实际上可以工作,而不是打开Safari菜单.希望这可以帮助!

Answer 2

事实证明，这是 safari mobile 中的标准行为，因此不能被覆盖，也许在未来的 IOS 更新中，此功能会改变。