I'm working on a responsive website for the first time and noticed a rather undesirable feature in Safari in iOS7 (on iPhone 4s). This problem may persist in later versions of the OS as well, I'm not sure.
The problem: As you can see in my gif above, there is no scrolling in portrait mode within the viewport because the height of the html and body tags are set to 100% in the CSS. The 3 divs you see each have a 33.33% height as well, meaning they should each take up one 3rd of the page.( which they do, in portrait mode )
However, when the view is switched to landscape mode and the user attempts to scroll - the page scrolls as if the height is greater than 100% of the viewport. There should be no scrolling because all elements should make up exactly 100% height.
I understand that Safari automatically shows the UI controls and address bar when the screen is tapped, my question then, is are there any ways to make the site resize when the UI controls appear? Or is there any way at all to just fit everything on the page without any scrolling when the UI controls are present? I want there to be no scrolling at all, as in when the site is in portrait mode.
My test site is here (Probably want to view this only in an iPhone)
I'm putting my code in a snippet below. I can't use jQuery for this. Thanks.
html, body{
margin:0; padding:0; width:100%; height:100%; background:#fff;
font-family:Arial; overflow:hidden;
}
p{ margin:0; padding:0; } nav{ height:100%; }
.vCenter{
position:relative; top:50%; -webkit-transform:translateY( -50% );
-ms-transform:translateY( -50% ); transform:translateY( -50% );
}
.option{
margin:0; width:33.33%; height:100%; background:#transparent;
text-align:center; text-transform:uppercase; font-size:110%; cursor:pointer;
-webkit-touch-callout:none; -webkit-user-select:none;
-moz-user-select:none; -ms-user-select:none; user-select:none; float:left;
-webkit-transition: background 0.5s ease, color 0.5s ease, font-size 0.5s ease;
transition: background 0.5s ease, color 0.5s ease, font-size 0.5s ease;
}
.option:hover, .option:active{
background:#0bb; color:#eee;
}
@media( min-height:299px ) and ( max-height:371px ){
.option{
width:100%; height:33.33%; box-sizing:border-box;
}
#function{
border-bottom:none;
}
}
@media( height:372px ){
.option{
width:100%; height:124px; box-sizing:border-box;
}
#function{
border-bottom:1px solid #eee;
}
}
@media( min-height:373px ) and ( max-height:568px ){
.option{
width:100%; height:33.4%; box-sizing:border-box;
}
#function{
border-bottom:none;
}
}<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8"><meta name="author" content="Lynel Hudson">
<meta name="desciption" content="Front End Reference for Anyone">
<title>WEB</title><link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="base.css">
</head>
<body ontouchstart="">
<nav>
<div id="design" class="option">
<p class="vCenter">design</p>
</div>
<div id="function" class="option">
<p class="vCenter">function</p>
</div>
<div id="rule"></div>
<div id="advanced" class="option">
<p class="vCenter">advanced</p>
</div>
</nav>
<script>
</script>
</body>
</html>