与页面底部对齐的按钮与移动Safari的菜单栏冲突 [英] Buttons aligned to bottom of page conflict with mobile Safari's menu bar

问题描述

我正在构建一个在多个平台上具有功能和漂亮的网络门户。

其中一个平台是IOS Safari，这是我遇到的问题。

在我的代码中，将两个浮动按钮对齐到一个div的底部，宽度和高度为100％。

这一切都很好，我的按钮显示完全像他们应该在底部页面。

然而，当我点击按钮时，从移动safari的紧凑视图切换到全视图，我的按钮隐藏在底部导航栏后面！


当用户点击屏幕底部10％时，safari手机是否显示扩展菜单是正常的行为？
如何避免此问题？


在此gif中，您可以在IOS模拟器上看到问题：

正如你所看到的，问题只发生在一个按钮在视图的低10％。
这只是一个普通的按钮，我的代码被几个开发人员三重检查，没有错误。

I am building a web-portal which has to be functional and pretty on multiple platforms.
One of the platforms is IOS Safari, and this is were I encountered a problem.
In my code I align two floating buttons to the bottom of a div with a width and height of 100%
This all works fine and my buttons show up exactly like they are supposed to on the bottom of the page.
However when I click the buttons the compact view from mobile safari switches to full view and my buttons are hidden behind the bottom nav bar!

Is it normal behavior for safari mobile to show the expanded menu when the user taps in the bottom 10% of the screen?
How can I avoid this?

In this gif you can see the problem on the IOS simulator:

As you can see the problem only occurs when a button is in the lower 10% of the view. This is just a normal button, My code was triple checked by several developers and it has no errors.

推荐答案

我想我可能会找到一个答案。将您的内容设置为以下样式：

I think I may have found an answer. Setting your content to have the following styles:

• height：100％
overflow-y：scroll （允许您滚动到视口下方;默认值为 visible ）

• -webkit溢出滚动：touch （以平滑任何滚动行为）

• height: 100% (allows content to fill the viewport and go beyond the bottom)
• overflow-y: scroll (allows you to scroll below the viewport; the default value is visible)
• -webkit-overflow-scrolling: touch (to smooth any scroll behavior)

会强制Safari中的iOS菜单始终显示。这样，按钮点击实际上会工作，而不是打开Safari菜单。希望这有助于！

appears to force the iOS menu in Safari to always appear. That way, button clicks will actually work instead of opening up the Safari menu. Hope this helps!

这篇关于与页面底部对齐的按钮与移动Safari的菜单栏冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！