Scrolling problems on a web page with fixed header and footer in iOS7
This will be difficult for me to explain, but I'll try: As a start, my web page is working on mobilebrowser in iOS6.x, Android, W7 and desktop browser IE9, Safari and Chrome. The problem happens in Apple's mobile Safari browser in iOS7. I had a problem with a sticky footer and the virtual keyboard, but that got solved here
Now I've a problem when scrolling on the page. When scrolling down, normally the navigation bar will hide and the address bar will shrink on iOS7. This doesn't happens. The content between the fixed header and footer is scrolling, but the bottom of the content is overlapped by the footer and navigation bar. I've to wait for the scrolling to stop before I can scroll down again. Then the address bar will shrink, the nav bar will hide and the bottom content will show. When I'm at the bottom of my page and want to scroll back up, the same thing happens, just upwards: Scrolling to the top, the header and the tiny address bar overlaps the upper content, wait for the scrolling to stop, then scroll again to have the address bar expand, the nav bar to show and the upper content to show. Hope this image can help:
Here are some of the css code:
*
{
margin: 0; padding: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html, body {
height: 100%;
margin: 0;
}
body{
font-family: Helvetica, Segoe UI, Arial, Sans-Serif;
font-size: 130%;
background-image: url('../images/background.png');
background-repeat:repeat;
overflow:hidden;
}
#header
{
text-align: center;
color:#FFF;
height: 45px;
position:fixed;
z-index:5;
top:0px;
width:100%;
top:0; left:0;
padding:0;
background-color:#2785c7; /* Old browsers */
background: -moz-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* FF3.6+ */
background: -webkit-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* IE10+ */
background: linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* W3C */
background: -webkit-gradient(linear, left top, left bottom, from(#206493), to(#2375ae), color-stop(85%, #2785c7)); /* Chrome,Safari4+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#206493', endColorstr='#2785c7',GradientType=0 ); /* IE6-9 */
}
#footer{
color:#CCC;
height: 48px;
position:fixed;
z-index:5;
bottom:0px;
width:100%;
padding-left:2px;
padding-right:2px;
padding:0;
border-top:1px solid #444;
background:#222; /* Old browsers */
background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
background: -moz-linear-gradient(top, #999, #666 2%, #222); /* FF3.6+ */
background: -webkit-linear-gradient(top, #999, #666 2%, #222); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #999, #666 2%, #222); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #999, #666 2%, #222); /* IE10+ */
background: linear-gradient(top, #999, #666 2%, #222); /* W3C */
}
#footer > div
{
height:48px; width:52px;
color:#AAACAF;
text-align:center;
font-size:0.55em;
display:inline-block;
cursor:pointer;
}
@media screen and (max-width: 350px) /* Mindre skift på mobil enheder */
{
#footer > div
{
width:48px;
font-size:0.40em;
}
}
#scroller
{
/* min-height: 360px;*/
padding-top:45px;
padding-bottom:48px;
overflow:hidden;
width:100%;
}
And here are some of the HTML:
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="images/name.png" />
<link rel="apple-touch-startup-image" href="images/startup.png" />
<link rel="shortcut icon" href="/images/name.ico" />
<link href="css/style.css?square=#VERSION" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.4.min.js?square=#VERSION" type="text/javascript"></script>
<script src="js/jquery.placeholder.js?square=#VERSION" type="text/javascript"></script>
<script src="js/javascript.js?square=#VERSION" type="text/javascript"></script>
<script src="js/divScroll.js?square=#VERSION" type="text/javascript"></script>
<script>
$(function() {
$('input[placeholder], textarea[placeholder]').placeholder();
});
</script>
</head>
<body>
<form id="Form1" runat="server">
<div id="header" style="line-height:45px;" runat="server">
Name
</div>
<div id="scroller" >
<div id="content">
...
...
...
</div>
<div id="footer" style="text-align:center">
<div id="LoginNameLogoDiv"><img alt="Company" src="images/company_logo.png" /></div>
</div>
</form>
</body>
</html>
Answer
Bugs on IOS7
On iPad, if the document body is set to 100 percent height, content is shifted upwards by 20px in landscape mode. This can be worked around by calling window.scrollTo(0, 0) on the orientationchange event.
You can look to this blog which mention what are fallback in IOS7 http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review