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

Question

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

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

<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% 高度的屏幕并将您的元素放置在底部：0 ?? 在这种情况下，您应该阅读这篇文章，因为 100vh 并未覆盖 iOS 8 中的完整视口：http://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

Answer 2

我能够解决底部对齐的固定位置元素的问题——显然我使用了 CSS hack 来强制 GPU 加速，所以这导致浏览器呈现我的固定位置元素不正确。

.force-gpu {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

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

Why is fixed position elements being cut off on full-screen iPhone experience when multiple tabs are open?

css

iphone

css-position

mobile-safari

ios