When Rotating An IPhone X To Landscape, White Space Appears To The Left And Below Cover Image

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 i

Solution 1:

I found the solution and wanted to post it in case anyone else has this problem.

The iPhone X has the notorious notch and home bar. Apple doesn't want content to be covered by those items unless you explicitly tell it to. To achieve the desired result you can remove the whitespace by simply adding the following to your style declaration.

CSS:

html {
  // your css to create a cover image 
  padding: env(safe-area-inset); // <- this is the missing piece. Add it.
}

And updated the meta tag to include viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

The padding tells iPhone X to add the necessary padding so the actual content is not covered by the notch and home bar.

The viewport-fit=cover tells the browser to extend the viewport "under" the notch and home bar.

I hope this helps someone!