title: iOS 8.3 fixed HTML element disappears on input focus
body: <p>I have a strange situation that sounds very much like the <a href="https://stackoverflow.com/questions/15199072/ios-input-focused-inside-fixed-parent-stops-position-update-of-fixed-elements">many fixed element issues with iOS</a> on Stack Overflow, but with a twist.  This only happens when the parent document is scrollable.  I am also using an iframe.  Below is a representation of the HTML I am displaying </p>
  
  <pre><code>&lt;body&gt;
     /*
      main content
      */
  
     &lt;div class="myCtrl"&gt; 
       &lt;iframe src="page2.htm"/&gt;//iframe contains html page with an input element
       &lt;div&gt;&lt;/div&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><code>.myCtrl</code> has a style of:</p>
  
  <pre><code> .myCtrl {
      max-width: none;
      max-height: 690px;
      width: 100vw;
      height: 75vh;
      bottom: 0;
      z-index: 1000;
      right: 0;
  }
  </code></pre>
  
  <p>The iframe contains several input elements that when focused (and soft keyboard pops up), <code>.myCtrl</code> is pushed out of view.  If I type something, <code>.myCtrl</code> comes back in to view and is displayed correctly.  If I remove focus from an input, <code>.myCtrl</code> does NOT leave the view and correctly stays put.  The <code>.myCtrl</code> will then behave correctly, respecting <code>position:fixed</code>, for the rest of the browser session regardless if an input has focus or not.</p>
  
  <p>both the parent page and the iframe have <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /&gt;</code> in the header.</p>
  
  <p>Meta tag solutions don't seem to work.</p>
  
  <p>using <code>position:absolute</code> doesn't seem feasible since <code>.myCtrl</code> is not able to receive any event notifications from input focus.</p>
  
  <p><code>-webkit-overflow-scrolling:touch;</code> doesn't seem feasible since <code>.myCtrl</code> is appended to the body, and I have no control over the content structure.</p>
  
  <p><a href="https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone">css font resizing</a> doesn't seem to work either.</p>