title: How to keep fixed html element visible on bottom of screen when the soft keyboard is open on iOS Safari?
body: <p>In a web page I have an input field and a div that is fixed to the bottom of the window (with these CSS properties: <code>position:fixed;</code> and <code>bottom:0;</code></p>
  
  <p>I made a Codepen to show what I'm talking about: <a href="https://codepen.io/anon/pen/xpQWbb/" rel="noreferrer">https://codepen.io/anon/pen/xpQWbb/</a></p>
  
  <p>Chrome on Android keeps the div visible even when the soft keyboard is open:</p>
  
  <p><a href="https://i.stack.imgur.com/6up4x.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6up4x.png" alt="enter image description here"></a></p>
  
  <p>However, Safari on iOS seems to draw the soft keyboard over the fixed element:</p>
  
  <p><a href="https://i.stack.imgur.com/aa5o3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aa5o3.png" alt="enter image description here"></a></p>
  
  <p>(I should mention I'm testing on the iOS simulator on my Macbook, because I don't have a working iPhone)</p>
  
  <p>Is there a way to make iOS Safari keep the element visible even when the soft keyboard is open, like how Chrome does it?</p>