CODEWITHSUNDEEP
cssiphoneios7heightviewport
INT
INT

Reputation: 912

iPhone with iOS7 does not display full height of document in landscape mode

So I noticed that there's a problem with the document height of Safari in iOS7 on an iPhone. I've seen a bunch of threads about the iPad, but nothing about the iPhone.

For some reason it does not display the full height of the document.

Here's a JSBin demo:
http://jsbin.com/bohociyo/1

enter image description here enter image description here

Markup + CSS for reference:

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>iPhone iOS7 bug</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body></body>
</html>

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {  
  overflow: hidden;
  background: #fff;
  color: #000
}

body::before {
  display: block;
  text-align: center;
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  z-index: 9999;
  padding: 5px;
  white-space: pre; /* or pre-wrap */
}

@media only screen and (orientation:portrait) {
  body::before {
    content: "Portrait \A Works as intended.";
  }
}

@media only screen and (orientation:landscape) {
  body::before {
    content: "Landscape \A Does not display the full height of the document. \A Grey bar appears.";
  }
}

Upvotes: 0

Views: 273

Answers (1)

INT
INT

Reputation: 912

A simple window.scrollTo(0, 0); on orientation change seems to have fixed it.
It's the minimal ui metag tag that's causing the bug.

window.addEventListener("orientationchange", function() {
    window.scrollTo(0, 0);
}, false);

Upvotes: 1

Related Questions