Z-index problems on ipad

问题

There's a fixed positioned layer with a bottom z-index that keeps popping up over the top of a relative positioned layer with an upper z-index. When the above layer scrolls over the top of the lower layer the fixed below layer appears on the top then disappears again when the page stops moving. The behavior happens on all the different "work" pages viewed in landscape "@media screen and (max-width: 1100px)" on an ipad. I have only tested on an ipad tablet not any other tablets.

Note:The behavior does not appear when viewing site on a pc in a collapsed browser sized "@media screen and (max-width: 1100px)". This leads me to believe the behavior is specific to tablets viewed in landscape only.

Any help would be greatly appreciated. Thank you for your time.

See link to site and effected sections of code below:

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

/++++++++++HTML Effected Section+++++++++++/

<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 Effected Section+++++++++++/

.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;
}