title: When rotating an iPhone X to landscape, white space appears to the left and below cover image
body: <p>A weird problem occurred today. While testing a simple "coming soon" page my background image on my iPhone X is not filling the entire viewport when rotating to landscape. Tested in Chrome and Safari.</p>
  
  <p>A simplified example that produces the problem:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    background: url(http://timwickstrom.com/assets/images/bg.png) no-repeat center center fixed;
    background-size: cover;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;html&gt;
  
   &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
   &lt;/head&gt;
  
   &lt;body&gt;
    
   &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see in the browser it renders fine. In portrait, it renders fine. In landscape not so much. See screenshots.</p>
  
  <p><a href="https://i.stack.imgur.com/2I84I.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2I84I.png" alt="portrait"></a>
  <a href="https://i.stack.imgur.com/qXbO2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qXbO2.png" alt="landscape"></a></p>
  
  <p>UPDATE: Cannot reproduce this on an iPhone 7. Just the iPhone X.</p>