iPhone 6 Plus，Safari，iOS8中的死区。当标签可见时，底部区域失去交互性

Question

我正在制作一个webapp并希望使用所有屏幕并尽可能避免滚动。在页面的许多区域都需要点击按钮。

当标签栏打开并且我旋转为纵向并返回横向时，移动野生动物园底部的区域无法点击。

我将body身高设置为与window.innerHeight相同而不是100％，这样我就不必滚动到底部的按钮了。

bodyEl.style.height = window.innerHeight + 'px';

可能是该区域无法用于交互式内容。

这是一个包含代码的演示：

http://plnkr.co/edit/327sUQ?p=preview

您应该可以通过点击全屏按钮“在单独的窗口中启动预览”在iPhone 6 Plus上打开预览。

更新

它绝对看起来像是iOS8中的一个错误，它在iOS8.4,9.0＆amp; 10.2来自我的模拟器。

Answer 1

我可能已经找到了您的问题的答案，但是如果您能确认，我们很乐意听到。将页面内容设置为具有以下样式：

• overflow-y: scroll（允许您在视口下方滚动，但仅在必要时根据内容的长度;默认值为visible）
• -webkit-overflow-scrolling: touch（以平滑任何滚动行为）

除了height: 100%（强制内容填充视口）

之外

似乎强制显示Safari中的iOS菜单（顶部的标签和地址栏以及底部的导航栏）。这样，点击页面顶部和底部的按钮就不再是“死区”＃34;并且实际上将工作而不是打开Safari菜单。

Answer 2

我正在寻找类似问题的解决方案 - 这不是答案，而是尝试解释。

首先 - 目前，我无法确认这种行为 - 似乎已经在iOS 8.4（12H143）中修复了。我不知道最后一次看到它的版本是什么。

尽管如此，我试着解释一下我发现了什么（直到我们决定不再烦恼）。 不可点击的区域并不总是死区。如果在点击之前向上滚动，很可能会让它运转起来。因此，我认为（空）标准导航栏就在那里（元素的高度和行为相似/相同），即使它在横向模式下为空（所有元素都移动到地址栏）。

顺便说一下： 还有iPhone 6 plus的另一个（类似的）问题（尚未修复）。 如果网页顶部有position: fixed元素，则在横向模式下，并且只有打开两个或多个标签（并且标签栏可见）时，您可以单击此元素（甚至通过按钮） - 好像整个事情都没有。

Answer 3

我知道这个问题有点陈旧，但既然问题仍然存在，我想我应该分享一下经验......

截至目前，该问题尚无定论，但有一种解决方法。提供的解决方案jennz0r可能适用于某些人，但我不喜欢菜单栏总是显示的想法。我看到一个解决了问题的网站......好吧它似乎至少起作用了。我没有在他们的css或js中找到任何东西。

那修复是什么？ 由于“死区”的高度为44px，他们只是将浮动条设为88px高度：D 用户会本能地点击按钮的顶部/中心，它几乎总是在第一次尝试时工作！ / p>

另一种解决方法是简单地使按钮/栏从底部浮动44px 。

“如果它是愚蠢的，但它有效...它不是愚蠢......”;）