title: Prevent page/view push-up when keyboard opens in iOS
body: <p>I am working on a form having a fixed header(for action buttons) and have encountered different behavior in iOS(both Safari and Chrome). The problem is that the OS is pushing entire web-view up whenever the keyboard opens, hiding the header which should be always visible. </p>
  
  <p>Tried few solutions <a href="https://stackoverflow.com/questions/38619762/how-to-prevent-ios-keyboard-from-pushing-the-view-off-screen-with-css-or-js/55630611#answer-38621037"><a href="https://i.stack.imgur.com/2Awup.gif" rel="noreferrer">1</a></a>, <a href="https://stackoverflow.com/questions/13820088/how-to-prevent-keyboard-push-up-webview-at-ios-app-using-phonegap"><a href="https://i.stack.imgur.com/dHrKh.gif" rel="noreferrer">2</a></a>(the JavaScript/jQuery part) and few other similar options. None of them solve this properly. I can't use native/hybrid support as mentioned <a href="https://forum.jquery.com/topic/prevent-ios-keyboard-push-up" rel="noreferrer">here</a>.</p>
  
  <p>Below is what I have tried - </p>
  
  <p><strong>Default behavior -</strong> The view scrolls up, hiding the header</p>
  
  <p><a href="https://i.stack.imgur.com/2Awup.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/2Awup.gif" alt="enter image description here"></a></p>
  
  <p><strong>After scroll override -</strong> The UI jumps on every click on input/textarea and header also hides sometimes.</p>
  
  <p><a href="https://i.stack.imgur.com/dHrKh.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/dHrKh.gif" alt="enter image description here"></a></p>
  
  <pre><code>// tried code to override iOS push behaviour
  $("body").on("focus", "input, textarea", function(event) {
    event.stopPropagation(); // this can be ignored
    let winScroll = window.scrollY;
    window.scrollTo({
      top: winScroll
    });
  });
  </code></pre>
  
  <p>Is there any way to keep the header always visible and fixed at top and rest of view may scroll, just like in browsers(not iOS)? <a href="https://codesandbox.io/s/dawn-flower-sxjob" rel="noreferrer">Code to replicate this behaviour</a> with <a href="https://sxjob.codesandbox.io/" rel="noreferrer">full-page view</a>. </p>