title: HTML element disappears when rotating to landscape in Safari in iOS when tab bar present
body: <p>This is the weirdest thing. Here's the source code.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;Kaely Michels-Gualtieri&lt;/title&gt;
              &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
              &lt;style&gt;
  
                     body { margin: auto }
                     #icons { margin: auto; position: fixed; left: 0px; bottom: 0px; right: 0px; width: 50%; height: 100px; background: black }
  
              &lt;/style&gt;&lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;span id="icons"&gt;
          &lt;a href="/"&gt;&lt;/a&gt;
      &lt;/span&gt;
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>I'm experimenting on an iOS device running the latest, 9.3 or whatever (nothing special), and <strong>when I orient the device with the source code provided above, the <code>&lt;span&gt;</code> bar disappears</strong> (if Safari's tab bar controller is visible – AKA open tabs in the background)! If there's no other tabs, there's no problem. <strong>Something to do with <code>position: fixed</code> elements.</strong></p>
  
  <p>I think it has to do with the Safari's tab bar controller screwing with the viewport.</p>
  
  <p><strong>Would love some help on this one. Thanks!</strong></p>