ipad上的Z-index问题

Question

有一个固定的定位层,其底部的z-index不断弹出具有上z-index的相对定位层的顶部.当上面的图层滚动到下层的顶部时,固定的下层显示在顶部,然后当页面停止移动时再次消失.行为发生在ipad上的横向"@media屏幕和(max-width:1100px)"中查看的所有不同"工作"页面上.我只在ipad平板电脑上测试过,而不是任何其他平板电脑.

注意:在折叠浏览器大小为"@media screen and(max-width:1100px)"的PC上查看网站时,不会出现此行为.这让我相信这种行为仅适​​用于仅在横向观看的平板电脑.

任何帮助将不胜感激.感谢您的时间.

请参阅下面的链接到站点和受影响的代码部分:

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

Answer 1

添加-webkit-transform: translate3d(0,0,0)到同一DOM级别的非固定位置元素.在你的情况下.innertube和也许.box.

如下所示:固定定位/ z-index在移动safari中的问题