title: Fixed persistent header and scroll to focussed input fields
body: <p><strong>QUESTION: Based on the given examples for homescreen web apps in iOS7 Safari, how can I achieve both a fixed persistent header that never scrolls out of view, and form input fields that scroll into view when tapped?</strong></p>
  
  <p>The two examples have one difference, one has <code>height=device-height</code> in the viewport, the other doesn't.</p>
  
  <hr>
  
  <h2>Without device-height</h2>
  
  <pre><code>&lt;meta id="viewport" name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1" /&gt;
  </code></pre>
  
  <p>Demo: <a href="http://run.plnkr.co/plunks/SU8Csk/" rel="noreferrer">http://run.plnkr.co/plunks/SU8Csk/</a></p>
  
  <p>Edit Link: <a href="http://plnkr.co/edit/SU8Csk" rel="noreferrer">http://plnkr.co/edit/SU8Csk</a></p>
  
  <p><img src="https://i.stack.imgur.com/F3dc2.png" alt="Without device-height"></p>
  
  <p><strong>The good:</strong> The fixed header does not change position/height when tapping the fields.</p>
  
  <p><strong>The bad:</strong> The user cannot see the focussed field without manually scrolling, or pressing the 'next' button. This can be very tedious, especially if the fields are on a page that doesn't overflow.</p>
  
  <hr>
  
  <h2>With device-height</h2>
  
  <pre><code>&lt;meta id="viewport" name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1" /&gt;
  </code></pre>
  
  <p>Demo: <a href="http://run.plnkr.co/plunks/rPoyaB/" rel="noreferrer">http://run.plnkr.co/plunks/rPoyaB/</a></p>
  
  <p>Edit Link: <a href="http://plnkr.co/edit/rPoyaB" rel="noreferrer">http://plnkr.co/edit/rPoyaB</a></p>
  
  <p><img src="https://i.stack.imgur.com/ljmfr.png" alt="With device-height"></p>
  
  <p><strong>The good:</strong> The user is scrolled to the focussed field as desired.</p>
  
  <p><strong>The bad:</strong> The fixed header scrolls completely out of view, this needs to be persisted on screen at all times. The scenario is, it will contain a cancel button and a save button that should always be accessible. Also when the field is blurred, the header itself looks squashed until the user scrolls it down into view, but if overflow is disabled then they can't even do this.</p>
  
  <p><strong>The ugly:</strong> On my non-trivial, real code, away from these simplified examples, there are a bunch of elements that are positioned absolutely within the header to create a curved line 'tab' effect, the alignment of these goes completely off.</p>
  
  <hr>
  
  <p>You should be able to open each demo URL in iOS7 Safari, add to Home Screen, and launch to demonstrate the issue.</p>
  
  <p>What is the best way of resolving this?</p>
  
  <blockquote>
    <p><em>NOTE: I am aware that there are 'bugs' in iOS7 Safari, particularly when it comes to homescreen web apps, however I believe that a
    workaround may exist related to how I
    am structuring the page. I have done a large amount of research (see
    below) but I am struggling to find a solution.</em></p>
    
    <p><em>Related links to 'fixed header' issue:</em> <a href="https://stackoverflow.com/q/22662852/1061602">Need Fixed Header in ios7+</a>, <a href="https://stackoverflow.com/q/17150959/1061602">How does one get a fixed header to stay at the top of the page?</a>,
    <a href="https://stackoverflow.com/q/13435833/1061602">Fixed headers with text fields on mobile safari websites</a>,
    <a href="https://stackoverflow.com/q/7970389/1061602">iOS 5 fixed positioning and virtual keyboard</a>,
    <a href="https://stackoverflow.com/q/15254095/1061602">Issues with fixed header, footer and side bar on ipad / iphone</a>,
    <a href="https://stackoverflow.com/q/4889601/1061602">CSS &quot;position: fixed;&quot; on iPad/iPhone?</a>,
    <a href="https://stackoverflow.com/q/743123/1061602">Fixed positioning in Mobile Safari</a>,
    <a href="https://stackoverflow.com/q/15273098/1061602">How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?</a>,
    <a href="https://stackoverflow.com/q/22141679/1061602">web app - device-height / keyboard issue</a>,
    <a href="https://stackoverflow.com/q/18977540/1061602">Div element won&#39;t stay at the bottom when ios 7 virtual keyboard is present</a>,
    <a href="https://stackoverflow.com/q/6630546/1061602">iOS web app: disable autofocus on input text field</a>, <a href="https://stackoverflow.com/q/19325052/1061602">disappearing position fixed header in ios7 mobile safari</a>,
    <a href="http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/" rel="noreferrer">http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/</a>,
    <a href="https://github.com/jquery/jquery-mobile/issues/5532" rel="noreferrer">https://github.com/jquery/jquery-mobile/issues/5532</a>,
    <a href="http://dansajin.com/2012/12/07/fix-position-fixed/" rel="noreferrer">http://dansajin.com/2012/12/07/fix-position-fixed/</a></p>
    
    <p><em>Related links to 'input fields do not focus' issue:</em> <a href="https://stackoverflow.com/q/18949647/1061602">webkit-overflow-scrolling forms broken on iOS 7 full-screen web app</a>,
    <a href="https://stackoverflow.com/q/19172922/1061602">Issue with iOS 7 Mobile Safari Scroll Events on Keyboard Up and Down</a>,
    <a href="https://stackoverflow.com/q/19110144/1061602">ios7 issues with webview focus when using keyboard html</a>,
    <a href="https://stackoverflow.com/q/979309/1061602">How do I focus an HTML text field on an iPhone (causing the keyboard to come up)?</a>,
    <a href="https://stackoverflow.com/q/6287478/1061602">Mobile Safari Autofocus text field</a>,
    <a href="https://stackoverflow.com/q/16312611/1061602">iPad browser requires extra tap after appending input</a>,
    <a href="https://stackoverflow.com/q/20776118/1061602">Tapping text input field on iPhone brings up keyboard, but typing will not put in any text</a>,
    <a href="https://stackoverflow.com/q/18736297/1061602">`-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7</a>,
    <a href="http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html" rel="noreferrer">http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html</a>,
    <a href="http://calendee.com/ios-7-kills-forms-in-html5-apps/" rel="noreferrer">http://calendee.com/ios-7-kills-forms-in-html5-apps/</a></p>
  </blockquote>