Разрыв ниже контента на iPad

У меня настроена веб-страница, на которой у меня есть несколько ссылок посередине, а под ней div плавает справа, около 25% экрана и еще один div с position: fixed, left: 0, bottom: 0. На моем рабочем столе в Firefox изображение внутри div с фиксированной позицией находится прямо в нижнем левом углу. Однако на iPad есть большой зазор под плавающим правым div. Изображение будет либо начинаться ниже области просмотра на экране, либо даже дальше вниз по странице с огромным разрывом в содержании между верхней частью изображения и нижней частью последнего блока текста.

HTML:

  <div class="wrapper">
     <div id="containerLeft">
        <img id="ipad" src="images/ipad-small.png" alt="a picture of an ipad held in a hand" />
     </div> 

     <div id="containerRight">
        <article>
           <p> stuff </p>
           <p> more stuff </p>
        </article>
     </div>
  </div>

CSS:

    .wrapper{
    width: 100%;
    overflow: hidden;
}
/* ------------ Left Container Content - image ------------- */
#containerLeft{
    width: 50%;
    z-index:-9999; 
    overflow: hidden;
    float: left;
}

#containerLeft img{
    position: fixed;
    left: 0;
    bottom: 0;
    display: block;
}

/* ---------- Right Container Content - copy on the side ---------------- */
#containerRight{
    width: 25%;
    float: right;
    margin: 50px 3.854167% 0 0;
}

#containerRight article{
    width: 100%;
}

#containerRight article p{
    line-height: 140%;
    font-weight: 400;
    font-size: 0.45em;
    text-align: right;
    font-style: italic;
    overflow: visible;
    padding: 1%;
    margin: 2% 0 0;
}

Кто-нибудь может сказать по этому поводу, что вызывает большой зазор в нижней части экрана?