Post not yet marked as solved
Post marked as unsolved with 6 replies, 10,222 views
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!
Posted
by
Gonif.
Last updated
Gonif.
.