ios - 为什么在打开多个选项卡时固定位置元素在全屏 iPhone 体验中被截断？

Question

我有一个全屏、不可滚动的交互体验，在 Canvas 上有固定位置的 UI 元素。这种体验在我测试过的每个浏览器中都运行良好，但在 iPhone 上，当打开多个选项卡时，页面顶部会被截断。

这是一个非常简化的代码示例...

http://codepen.io/anon/pen/rVEOgw

<style>
  #interface {
    position: fixed;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
  #logo {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
  }
  
  #nav {
    position: fixed;
    z-index: 200;
    bottom: 50px;
    left: 0;
  }
  
  #background {
    position: fixed;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #333;
  }
</style>
<div id="interface">
  <div id="logo">
    <a href="#"><img src="http://www.grandinroad.com/wcsstore/images/GrandinRoad/logo.png" /></a>
  </div>
  <div id="nav">
    <button>&lt; Previous</button> | <button>Next &gt;</button>
  </div>
</div>
<div id="background">
  <!-- BACKGROUND -->
</div>

知道如何解决吗？

Answer 1

是否有可能您依赖于 100% 高度的屏幕并将元素放置在 bottom: 0 ??在这种情况下，您应该阅读这篇文章，因为 100vh 不涵盖您在 iOS 8 中的完整视口(viewport):http://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html