title: Safari Viewport Bug, Issues with Fixed Position and Bottom or Top
body: <p>I'm experiencing something strange in iOS 12.3.1 Safari. <strong>This issue dates back to at least iOS 12.2,</strong> but I imagine it's been a problem for much longer than that.</p>
  <p>The issue manifests itself when trying to align an element to the bottom axis of the viewport, and is a problem in both portrait and landscape mode.</p>
  <p>In order to reproduce the problem, the element must have a <code>position</code> of <code>fixed</code> or <code>absolute</code>, yet it doesn't matter whether you position the element with <code>top</code> and <code>transform</code> or <code>bottom</code>.</p>
  <h1>Portrait Mode</h1>
  <p>The issue only manifests itself in portrait mode <strong>if Safari is displaying its condensed URL bar,</strong> which replaces the normal URL and menu bars, <strong>and there is no vertical overflow.</strong></p>
  <p><em><strong>Normal URL and Menu Bars // Condensed URL Bar</strong></em></p>
  <p><a href="https://i.stack.imgur.com/AASvam.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AASvam.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/1jDcWm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1jDcWm.png" alt="enter image description here" /></a></p>
  <p>Notably, the condensed menu bar is only ever displayed when there is either vertical overflow and the browser is scrolled downwards or when the browser's orientation has been changed from portrait to landscape and then back again (despite whether or not there is vertical overflow).</p>
  <p><em><strong>Changing Orientation with Vertical Overflow // Without Overflow</strong></em></p>
  <p><a href="https://i.stack.imgur.com/LfdtKm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LfdtKm.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/VFRyfm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/VFRyfm.png" alt="enter image description here" /></a></p>
  <p>I'm not sure exactly what's happening here.</p>
  <h1>Landscape Mode</h1>
  <p>The issue with landscape mode always and only occurs when the normal navigation bar is displayed at the top of the page. The navigation bar is only ever hidden in landscape mode due to downward scrolling or orientation change from portrait to landscape.</p>
  <p><em><strong>With Vertical Overflow</strong></em></p>
  <p><a href="https://i.stack.imgur.com/2yL5Im.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2yL5Im.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/03OGcm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/03OGcm.png" alt="enter image description here" /></a></p>
  <p><em><strong>Without Vertical Overflow</strong></em></p>
  <p><a href="https://i.stack.imgur.com/2yL5Im.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2yL5Im.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/wNvg0m.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wNvg0m.png" alt="enter image description here" /></a></p>
  <p>What's interesting is that the height of the navigation bar in landscape mode clearly offsets the viewport so that position of <code>bottom: 0</code> or <code>top: 100%</code> is pushed outside of the viewport when the navigation bar is being displayed.</p>
  <h1>Crappy &quot;Workaround&quot; for Portrait Mode</h1>
  <p>It's a super hack-ish workaround, and a crappy workaround at that, but it's the only thing so far that causes <code>position: fixed; bottom: 0;</code> to actually position an element at the bottom of the viewport after switching orientations if there is no overflow.</p>
  <pre><code>&lt;div style='height: 0'&gt;
    &lt;!-- the quantity of &lt;br&gt; elements must create vertical overflow --&gt;
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;!-- this does not work without the space character --&gt;
    &amp;nbsp;
  &lt;/div&gt;
  </code></pre>
  <p>However, I just noticed that it creates an invisible vertical overflow and thus unnecessary vertical scrolling in at least Safari and Chrome. I'm also worried that it might cause other issues on other devices in other browser that I'm unable to test.</p>
  <hr>
  <p>It absolutely sucks that a website has to sometimes look like crap for the sake of user-experience due to this bug.</p>
  <h1>Does anybody out there have any idea what is happening?</h1>
  <h1>Anybody aware of any workarounds?</h1>
  <h1>Anybody aware of an actual solution?</h1>