Проблемы с Z-индексом на ipad

Есть фиксированный позиционированный слой с нижним z-индексом, который продолжает появляться над верхней частью относительного позиционированного слоя с верхним z-индексом. Когда верхний слой прокручивается над верхним нижним слоем, фиксированный нижний слой появляется сверху, а затем снова исчезает, когда страница перестает двигаться. Такое поведение наблюдается на всех различных" рабочих "страницах, просматриваемых в альбомной ориентации" @media screen и (max-width: 1100px) " на ipad. Я тестировал только на планшете ipad, а не на других планшетах.

Примечание: поведение не отображается при просмотре сайта на ПК в свернутом браузере размером " @media screen and (max-width: 1100px)". Это приводит меня к мысли, что поведение специфично для планшетов, рассматриваемых только в ландшафте.

Любая помощь будет весьма признательна. Спасибо, что уделили мне время.

Смотрите ссылку на сайт и соответствующие разделы кода ниже:

Http://mikemarchitto.net78.net/portfolio/smithsonian.html

/++++++++++HTML-код Секция+++++++++++/

<div class="innertube">

<div class="gallery-small">
<img class="gallery" src="images/gallery-smithsonian.jpg" alt=""/>
</div>

<div id="button-2">
    <ul>
    <li><a href="edgar-gabriel.html">&larr;</a></li>
    <li><a href="index.html">H</a></li>
        <li><a href="invite.html">&rarr;</a></li>
    </ul>            
</div>
</div>
</div>

<div class="innertube">
<div class="gallery-big">
<img class="gallery" src="images/gallery-smithsonian.jpg" alt=""/>
</div>
</div>

/++++++++++раздел CSS-эффект+++++++++++/

.box {
    width:100%;
    position: relative;
    z-index: 2;
}

#framecontentRight {
    position: fixed;
    z-index: 1;
    top: 17.5em; 
    right: 3em; 
    width: 15.5em; 
    color: #666666;
}

.innertube{
    margin: 3.5em 20em 0 3em; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

.gallery {
    width: 97%;
    height: auto;
    display: block;
    margin-bottom: 3em;
}