javascript – iPhone 6 Plus,Safari,iOS8中的死区.当标签可见时,底部区域失去交互性

我正在制作一个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& 10.2来自我的模拟器.

最佳答案
我正在寻找类似问题的解决方案 – 这不是答案,而是尝试解释.

首先 – 目前,我无法确认这种行为 – 似乎已在iOS 8.4(12H143)中修复.我不知道最后一次在哪个版本看到它的exaclty.

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

navigation elements

顺便说一句:
iPhone 6 plus还有另一个(类似的)问题(尚未修复).
如果你有一个位置:网页顶部的固定元素,在横向模式下,并且只有打开两个或多个标签(并且标签栏可见),你可以点击这个元素(甚至通过按钮) – 如如果整件事都没有.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效