I´m developing html+css for an iPad app.
To illustrate the problem I have made a simple dummy:
<head>
<meta charset="UTF-8" />
<style>
body {
height:100%;
width:100%;
padding:0px;
margin:0px;
background:#333;
}
#container {
width:90%;
margin:0 auto;
background:#ccc;
padding:10px;
}
#footer {
position:fixed;
bottom:0px;
height:100px;
width:100%;
background:red;
text-align:center;
}
</style>
</head>
<body>
<div id="container">Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
</div>
<div id="footer">
</div>
</body>
Try with iPad / Safari mobile and you will notice the the first time you scroll the footer (red block). It scrolls up out of position, untill you stop scrolling. On your second attempt it all works well.
When you reload the page it all happens again.
I think it´s the support for position fixed that is buggy.
Any ideas how to solve this? Perhaps with jQuery.
Jimbo above identified the problem and led me to the answer.
It worked with 100ms delay.
Here´s the final sollution that worked for me.
function fixJqmScrollBug() {
window.scrollTo(0, 1);
setTimeout(function() {
window.scrollTo(0, 0);
}, 100);
}
$(document).ready(function() {
fixJqmScrollBug();
});