alignment到页面底部的button与移动Safari的菜单栏冲突

我正在build立一个在多个平台上必须function性和漂亮的门户网站。
其中一个平台是IOS Safari,这是我遇到的一个问题。
在我的代码中,我将两个浮动buttonalignment的宽度和高度为100%
这一切工作正常,我的button显示完全像他们应该在页面的底部。
但是,当我点击button从移动Safari的紧凑视图切换到全视图,我的button隐藏在底部的导航栏后面!

当用户点击屏幕底部的10%时,safari mobile是否正常显示扩展菜单?
我怎样才能避免这一点?

在这个gif中,你可以在IOS模拟器上看到问题:
例
正如你所看到的问题只发生在一个button在视图的下10%。 这只是一个正常的button,我的代码被几个开发人员三重检查,它没有错误。

我想我可能find了答案。 将您的内容设置为具有以下样式:

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

似乎强制Safari中的iOS菜单总是出现。 这样,button点击将实际上工作,而不是打开Safari菜单。 希望这可以帮助!

事实certificate,这是safari mobile的标准行为,因此不能被覆盖,也许在未来IOS更新中,这个function将会改变。

我知道这个问题有点老,但是由于问题依然存在,我以为我应该分享我的经验…

截至目前没有解决这个问题,但有一个解决方法。 jennz0r提供的解决scheme可能适用于某些,但我不喜欢总是显示菜单栏的想法。 我看到一个网站,解决了这个问题…好像至less工作。 我没有发现任何东西在他们的CSS或JS。

那么是什么修复? 由于“死区”的高度为44px,因此他们只是将浮动条的高度设置为88px:D用户会本能地点击button的顶部/中心,并且几乎总能在第一次尝试时使用!

“如果这是愚蠢的,但它的作品…这不是愚蠢的…”)