ipad의 Z- 인덱스 문제

Question

위쪽 z- 인덱스가있는 상대적 위치 지정 레이어의 맨 위에 계속 나타나는 아래쪽 z- 인덱스가있는 고정 위치 지정 레이어가 있습니다. 위의 레이어가 하위 레이어의 맨 위로 스크롤하면 고정 된 아래 레이어가 맨 위에 표시되고 페이지가 움직이지 않을 때 다시 사라집니다. 이 동작은 ipad의 가로 화면 "@media 화면 및 (최대 너비 : 1100px)"에서 본 모든 다른 "작업"페이지에서 발생합니다. 나는 다른 태블릿이 아닌 ipad 태블릿에서만 테스트했습니다.

참고 : "@ 미디어 화면 및 (최대 너비 : 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; 
} 

Answer 1

-webkit-transform: translate3d(0,0,0)을 동일한 DOM 수준의 고정되지 않은 위치 요소에 추가하십시오. 귀하의 경우 .innertube 및 아마도 .box. 여기에서 알 수있는 바와 같이

는 : Fixed positioning/z-index issue in mobile safari