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

Question

I have a full-screen, non-scrollable interactive experience with fixed-position UI elements over top of a canvas. This experience works just fine in every browser that I've tested, however on iPhone, when there are multiple tabs open, the top of the page is being cut off.

Here's a very simplified code example...

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> 

Any idea how to fix?

Answer 1

Is it possible you are relying on a 100% height screen and you position your elements bottom: 0 ?? In that case, you should read this article as the 100vh does not cover your complete viewport in 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

I was able to fix my issue with the bottom-aligned fixed-position element -- apparently I was using a CSS hack to force GPU acceleration, so that was causing the browser to render my fixed position elements incorrectly.

.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);
}