height:100% is not 100% after rotating device

Question

Created Feb ’20

Replies 6

Boosts 0

Views 12k

Participants 7

I've observed some strange behavior that started around iOS 12.2 and continues through iOS 13.x. If you load even a very simple web page into Safari that contains a div with a 100% height, then the result is correct and you get a full-screen div. If you rotate the device to landscape then it resizes and the div still fills the screen. But when you rotate it back to portrait, an empty white area appears at the bottom of the screen, and there doesn't appear to be a way to make it go away.

I suspect this has to do with the change Apple made around the iOS 12.2 timeframe, where when a phone is rotated to portrait, the URL bar shrinks and the navigation bar is hidden. When this happens, the content area is in effect larger than it was before, but it's like CSS doesn't know about it, so a height of 100% represents the height as if the URL bar was larger and the nav bar was present.

This HTML is enough to show the issue:

<!DOCTYPE html>
<html style="margin:0; padding:0; height:100%;">
  <head>
    <title>Test Page!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body style="margin:0; padding:0; height:100%;">
    <div id="Layout1" style="border-width:0px; height:100%; width:100%; background-color:red;">Rotate me</div>
  </body>
</html>

Viewing that page on an iPhone with iOS 12.2+ will look fine, so rotate to landscape and then rotate back to portrait. A white area will appear at the bottom. I'm told that on larger-style iPhones, this only occurs if it is the only tab open -- otherwise, iOS never hides the navigation bar. On my 6s, it happens every time.

Has anybody seen this before? Any ideas for working around it? It is making all of our web apps "scrunch up" after users rotate their devices, with no obvious way to programmatically fix it!

Thanks!

Boost

Answer 1

Oomrazoom OP

May ’20

I am also experiencing this issue in my applicaiton. The div that is shortened is in the middle of the screen, creating a white gap, im thinking it's the 100%. Only an issue on iOS devices.

0

Answer 2

eightarmshq OP

Jun ’20

I also have this issue. Its not an option in my case, but in case it is in yours, removing the viewport meta tag seemed to fix it.

0

Answer 3

kazinov OP

Jul ’20

Hi,

I also faced this problem.
I've created a question on stackoverflow:
https://stackoverflow.com/questions/62717621/white-space-at-page-bottom-after-device-rotation-in-ios-safari

0

Answer 4

arafath_mk OP

Jul ’20

Hi,

Setting the heights of "html" and "body" to 100vh solves the issue.

Code Block html<!DOCTYPE html>
<html style="margin:0; padding:0; height:100vh;">
	<head>
		<title>Test Page!</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body style="margin:0; padding:0; height:100vh;">
		<div id="Layout1" style="border-width:0px; height:100%; width:100%; background-color:red;">Rotate me</div>
	</body>
</html>

2

Answer 5

Gonif OP

Aug ’20

@arafath_mk, I don't think setting the heights to 100vh really fixes it. In my sample code, when the URL and nav bars are present, "100vh" extends the div so that it's underneath the nav bar. The div is taller than the available screen space, and you can actually scroll up and down. What we want is to have the div size itself to the available screen size, regardless of orientation. Thanks for the suggestion, though.

0

Answer 6

gwailou OP

Aug ’23

It is not a bug. Refer to my Stackoveflow question here: https://stackoverflow.com/questions/56622926/safari-viewport-bug-issues-with-fixed-position-and-bottom-or-top

0