Z-Index-Probleme auf dem iPad

Question

Es gibt einen fest positionierten Layer mit einem unteren Z-Index, der über dem oberen Rand eines relativ positionierten Layers mit einem oberen Z-Index erscheint. Wenn die obige Ebene über die obere Ebene scrollt, wird oben die fixierte untere Ebene angezeigt und verschwindet dann wieder, wenn die Seite nicht mehr bewegt wird. Das Verhalten tritt auf allen verschiedenen "Arbeitsseiten" auf, die im Querformat "@media-Bildschirm und (max-width: 1100px)" auf einem iPad angezeigt werden. Ich habe nur auf einer iPad-Tablette keine anderen Tabletten getestet.

Hinweis: Das Verhalten wird nicht angezeigt, wenn die Site auf einem PC in einem minimierten Browser mit der Größe "@media-Bildschirm und (max-width: 1100px)" angezeigt wird. Dies lässt mich glauben, dass das Verhalten spezifisch für Tablets ist, die nur in der Landschaft betrachtet werden.

Jede Hilfe würde sehr geschätzt werden. Vielen Dank für Ihre Zeit.

Siehe Link zur Website und bewirkt Codeabschnitte unter:

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

/++++++++++ HTML Effected Abschnitt +++++++++++/

<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 betroffener Abschnitt +++++++++++/

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

Answer 1

Fügen Sie -webkit-transform: translate3d(0,0,0) zu den nicht festen Positionselementen auf derselben DOM-Ebene hinzu. In Ihrem Fall .innertube und vielleicht .box.

Wie hier zu sehen: Fixed positioning/z-index issue in mobile safari