I see a gap between my img and my right box - ios

Question

I'm having some difficulty getting my website to display properly when viewed on the iPhone and iPad. The website displays properly when viewed on every desktop browser I've tried (safari, chrome, firefox), however, on the iPhone/iPad there is a tiny gap/space between the IMG and right box.
It works fine in Firefox. What is the problem?
Here's an inline link to JsFiddle.
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/>
<div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
#wrapper {
border-top: 8px solid #457b91;
max-width: 488px;
margin: 0 auto;
overflow: hidden;
}
#wrapper img {
width: 32%;
float: left;
}
#subject {
background-color: green;
float: right;
width: 68%;
padding-bottom: 32%;
position: relative;
}
#subject_wrapper {
padding-top: 12%;
position: absolute;
height: 100%;
width: 100%;
}
#subject span {
font-family: Thonburi;
font-size: 34px;
color: #ffffff;
display: block;
padding: 0 20%;
}
#subject span:nth-child(2) {
font-size: 18px;
line-height: 8px;
}

Answer 1

I don't have an iPd or iPhone to hand to check this, but try commenting out the space between your elements, thus:
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/><!--
--><div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
It's a pretty ridiculous fix, but it work for inline block elements, like menus made up of LIs.