title: "Fixed" header and footer with scrolling middle in Web-app on iOS 7.1.2
body: <p>I have created a quite simple demo web-app, <a href="https://mtr.github.io/core-layout/examples/" rel="nofollow noreferrer" title="Core Layout: Demo App">core-layout</a>, using AngularJS with optional support for using iScroll 5.  (<strong>Update</strong>: <a href="https://mtr.github.io/core-layout/examples/" rel="nofollow noreferrer" title="Core Layout: Demo App">the version linked to on GitHub pages</a> is now fixed, as shown in my answer below.  If you want to see how this problem behaved, either look at the attached images or checkout <a href="https://github.com/mtr/core-layout/tree/v1.2.1" rel="nofollow noreferrer">version v1.2.1</a> and build the examples locally).</p>
  
  <p>I am aware of the issues with elements with CSS <code>position: fixed</code> on iOS 7.x.  For example, <a href="https://stackoverflow.com/questions/18970865/">when you activate input elements, fixed positioned elements move around</a>, and I've read about how <a href="https://developers.google.com/mobile/articles/webapp_fixed_ui" rel="nofollow noreferrer">Google's Gmail team had to turn off native scrolling and animate the scrolling area themselves</a>.  Therefore, I made the app layout use CSS <code>position: absolute</code> directives on the header and footer when iScroll is toggled <em>on</em>.  However, if the iScroll is toggled <em>off</em>, the layout use <code>position:fixed</code>, which works very well with newer browsers on both mobile and desktop.</p>
  
  <p>I have manually tested that the app renders and behaves as expected on several mobile devices, including both iOS and Android devices.</p>
  
  <p>However, in Safari on an iPhone 5s with iOS 7.1.2, with iScroll <em>on</em>, the header is hidden behind Safari's address bar, and the footer is rendered too low on the screen, so it gets hidden behind Safari's footer menu, as shown in the following screen shot:  </p>
  
  <p><img src="https://i.stack.imgur.com/knBlj.jpg" alt="initial view, iScroll: on, position: absolute"> </p>
  
  <p>Then, when I manage to get hold of the header menu, I can pull it downwards, so that the header menu becomes visible, but the footer menu is then still hidden:</p>
  
  <p><img src="https://i.stack.imgur.com/1ILZa.jpg" alt="pulled header menu down, iScroll: on, position: absolute"></p>
  
  <p>If I then manage to push the header menu upwards, the footer menu slides in to become visible at the bottom of the screen, above Safari's own footer menu:</p>
  
  <p><img src="https://i.stack.imgur.com/HubRN.jpg" alt="pushed header menu up, iScroll: on, position: absolute"></p>
  
  <p>If I turn iScroll <em>off</em>, and thereby also change to position the header and footer menus with <code>position: fixed</code>. all <em>renders</em> OK, but the scrolling field has no momentum (and therefore feels a bit off), and I'll probably have to fight with fixed-position elements jumping around screen when input fields get activated (triggering iOS' on-screen keyboard):</p>
  
  <p><img src="https://i.stack.imgur.com/AsqZJ.jpg" alt="on top, iScroll: off, position: fixed"><img src="https://i.stack.imgur.com/1Rv5G.jpg" alt="scrolled to bottom, iScroll: off, position: fixed"></p>
  
  <p>When I test the same web-app on an iPad running iOS 7.0.6, the same problem does not occur.</p>
  
  <p>The source code is of course available on <a href="https://github.com/mtr/core-layout" rel="nofollow noreferrer" title="Core Layout: GitHub Repo">GitHub</a>.  Now, I wonder what I am doing wrong and how can  this problem be fixed? </p>