title: Safari Mobile app banner changes the viewport height
body: <p><a href="https://i.stack.imgur.com/wL4aZ.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/wL4aZ.jpg" alt="enter image description here"></a></p>
  
  <p>The banner below the <strong>address bar</strong> is changing the height and not even a part of DOM.</p>
  
  <p><code>Position: fixed</code> elements on the bottom are hidden.</p>
  
  <p>You can view this by </p>
  
  <ol>
  <li>Open <a href="https://www.ounass.ae/clothing/" rel="noreferrer">https://www.ounass.ae/clothing/</a> in <code>Safari - iOS smart phones</code></li>
  <li>Scroll down to view this App Banner</li>
  <li>Click on <code>Filter By</code> button.</li>
  </ol>