Z-index problems on ipad

Question

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

Mention

I have reviewed your site on my iPad (iOS 9.3.2) and can't see any errors. But I think I have heard about the problem before. As far as I konw there is no solution, its an issue of Safari's HTML rendering. (Maybe Apple will fix it with an iOS Update.) – Ruisdael

You are free to accept an answer, if it helped you and you don't have any more questions. :) Otherwise feel free to ask. – Jenette

Answer 1

Add -webkit-transform: translate3d(0,0,0) to the not fixed position elements on the same DOM level. In your case .innertube and maybe .box.

As seen here: Fixed positioning/z-index issue in mobile safari

Jenette

That did it! Thank you. – Mention