title: iOS 11 fixed input bug + jitter on scroll
body: <p>iOS 11 has issues with inputs inside a fixed container <a href="https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8" rel="nofollow noreferrer">more here</a>, specifically with iOS 11 on focus + the keyboard cursor is misaligned to the input:</p>
  
  <p><a href="https://i.stack.imgur.com/FVpbe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FVpbe.png" alt="enter image description here"></a></p>
  
  <p>I have an element <code>.rn-drawer</code> that ought to be fixed to the top of page, while the rest of the page content is scrollable. The fixed element contains an input.</p>
  
  <pre><code>.rn-drawer {
      position: fixed;
      transition: all 0.25s ease-in-out;
      display: flex;
      height: 260px;
  }
  </code></pre>
  
  <p>By simply applying the following <code>.iOS-fix</code> to the parent/root container I can resolve the misalignment of my input to keyboard.</p>
  
  <pre><code>.iOS-fix {
      position: fixed;                            // causes jitter on scroll, but resolves fixed input alignment bug
      /*position: sticky;                         // no jitter, but doesn't resolve fixed input alignment bug*/
      /*transform: translate3d(0, 0, 0);          // no jitter + resolves fixed input alignment, BUT loses fixed position on children (like .rn-drawer)*/
      overflow-y: scroll;
      height: 100%;
      width: 100%;
  }
  </code></pre>
  
  <p>BUT there is a really bad jitter/stutter on scroll, which after some research I believe that a solution for this is forcing GPU acceleration in the CSS by applying a <a href="https://stackoverflow.com/questions/20832531/mobile-safari-positionfixed-z-index-glitch-when-scrolling">transformation</a>.</p>
  
  <p>Ok, this solves this jitter and the fixed input alignments issue BUT now the <code>postion:fixed;</code> on <code>.rn-drawer</code> no longer applies; as transformations change the coordinate system for children elements (and thus my drawer is not fixed).</p>
  
  <p><code>position: sticky;</code> stops the jitter, but same issue with input misalignment.</p>
  
  <p>Is there any viable solution that will solve the input alignment bug, but also allow my input container to be fixed AND not cause any jitter on scroll?</p>
  
  <p>Thanks.</p>