Absolute elements offset in landscape orientation

Absolute elements offset in landscape orientation

My page when viewed on a mobile browser (tested on Android JB and iOS 6)
renders fine when initially loaded in both portrait and landscape modes.
However, when I go from landscape to portrait the absolute positioned divs
are offset from where they should actually be. The weird part is that if I
am zoomed in when I change the orientation this problem doesn't manifest.
This is same as the problem mentioned here: Strange offset in the CSS
element position after changing orientation on iPad only difference being
I am testing on a phone. I tried the solutions provided there but they
don't seem to work.
Here is my CSS
html{
width: 100%;
height: 100%;
}
body{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #000;
}
#container{
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
min-width: 960px;
min-height: 544px;
}
#pic{
display: table;
height: 100%;
width: auto;
margin: 0 auto;
z-index: 5;
}
#links{
position: absolute;
width: 100%;
height: 50px;
bottom: 5px;
left: 0;
right: 0;
z-index: 9;
background: #ccc;
-ms-filter:
"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
filter: alpha(opacity=10);
-moz-opacity: 0.1;
-khtml-opacity: 0.1;
opacity: 0.1;
}
#wrapper{
position: absolute;
width: 100%;
height: 50px;
bottom: 5px;
left: 0;
right: 0;
z-index: 12;
}
#content{
display: table;
width: 100%;
height: 100%;
margin: 0 auto;
}
#content div{
display: inline-block;
*display: inline;
zoom: 1;
width: 20%;
text-align: center;
}
#content div *{
vertical-align: middle;
border: 0;
text-decoration: none;
color: #000;
border-radius: 5px;
}
/* portrait */
@media screen and (orientation:portrait) {
#container{
position:relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
min-width: 960px;
min-height: 544px;
}
}
/* landscape */
@media screen and (orientation:landscape) {
#container{
position:relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
min-width: 960px;
min-height: 544px;
}
}
As you can see I have tried the solution from the other question which
doesn't work. And my HTML structure
<div id="container">
<img src="pic_jj.jpg" alt="image" id="pic" />
<div id="links">
</div>
<div id="wrapper">
<div id="content">
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
</div>
</div>
You can view my page here if you need a live demo. I should probably
mention that I am looking for a non-js solution.
PS. I am using this meta tag:
<meta name="viewport" content="width=device-width, height=device-height,
initial-scale=1, maximum-scale=1, user-scalable=no;">