ios - img と右側のボックスの間に隙間がある

Question

iPhone や iPad で Web サイトを正しく表示するのに苦労しています。Web サイトは、私が試したすべてのデスクトップ ブラウザー (サファリ、クロム、Firefox) で表示すると正しく表示されますが、iPhone/iPad では、IMG と右のボックスの間に小さなギャップ/スペースがあります。Firefox では問題なく動作します。何が問題ですか？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;
}