Login/Register
When rotating an iPhone X to landscape, white space appears to the left and below cover image
Asked Answered
Solved htmlresponsive-designresponsivecover
O

1

20

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.

A simplified example that produces the problem:

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;
}
<!DOCTYPE HTML>

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	</head>

	<body>
		
	</body>

</html>

As you can see in the browser it renders fine. In portrait, it renders fine. In landscape not so much. See screenshots.

portrait landscape

UPDATE: Cannot reproduce this on an iPhone 7. Just the iPhone X.

Overexcite answered 22/5, 2018 at 19:25 Comment(0)
O
67

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!

Overexcite answered 22/5, 2018 at 19:58 Comment(4)
You saved me a lot of painful searching. Thank you :) – Chloroplast
Thanks a lot. I logined to account to upvote your answer – Fraxinella
the // are not valid comments and should be replaced with /* */ comments (edit queue is full or I would edit the answer). See #51844006 – Gheber
This didn't work for me, wonder if this is still applicable. – Pangolin

© 2022 - 2024 — McMap. All rights reserved.