當打開多個標簽時，為什么固定位置元素在全屏iPhone體驗中被切斷？

Question

我在畫布上方的固定位置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％的屏幕並且將元素定位在底部：0？ 在這種情況下，您應該閱讀此文章，因為100vh無法覆蓋iOS 8中的完整視口： http ://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible- 該文檔的一部分在某些移動瀏覽器.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);
}