使用iOS 7.1 minimal-ui从纵向切换到横向时可见灰色区域

Question

在我正在处理的Web应用程序中,我尝试了iOS 7.1的新minimal-ui功能(请参阅带有minimal-ui元标记的iOS 7.1中的safari全屏),但我发现了一个问题,即出现了84px高的灰色区域我从画像切换到风景时的底部.此外,document.body.scrollTop切换到横向后更改为64.

您可以使用此"Hello World"Web应用程序查看该问题:http://www.creativepulse.gr/media/blog/2014/20140123-hello-world/example.html

当我在iOS 7.1 iPhone Retina Simulator上的Mobile Safari中加载应用程序时,在纵向模式下一切都很好.但是,切换到横向时,会立即出现灰色区域.

解决此问题的好方法是什么？

Answer 1

页面呈现后滚动到顶部对我有帮助.它以某种方式导致重新渲染并且灰色框消失,但是我无法解释Safari在内部的确切行为:

window.scrollTo(0, 0);

Answer 2

我尝试了一段时间来解决这个问题但没有运气.我终于决定在哪里做一个测试:

1. 使用minimal-ui元标记创建了一个新的HTML文档.
2. 将文档的主体留空(没有HTML标签),也没有样式.

经过测试,问题仍然存在.

我能想到的唯一结论是,这是IOS 7.1中的一个错误,所以我向Apple提交了一个错误报告.它被报道为BUG#:16335579.

请注意,kraftwer1先生的解决方案对我有用(这是一个黑客攻击,但在Apple修复此问题之前必须这样做).也就是说,window.scrollTo(0, 0);在orientationChange工作之后添加......

最后,我还想提一下,向Apple提交关于此问题的其他错误报告将提升它在队列中的优先级.