Essentially, here's the situation:
Browser:
Iphone (the issue doesn't occur in Android):
My current setup includes:
<meta name="viewport" content="user-scalable = yes">
Here is the corresponding CSS:
html,
body,
#wrapper {
height: 100%;
}
body > #wrapper {
height: 100%;
min-height: 100%;
}
#content {
clear: both;
padding-bottom: 36px;
}
#header,
#content,
#footer {
padding-left: 20px;
padding-right: 20px;
}
.container {
margin: 0 auto;
width: 960px;
}
#footer {
background: url(images/footer_bg.png) repeat-x 0 0;
margin: -65px 0 0;
padding: 15px 0 14px;
position: relative;
clear: both;
height: 36px;
}
See a live example:
I'm currently stuck and puzzled. What could be causing this issue?