jQuery ScrollTo IE에서 요소 사라짐 원인 :

Question

jquery ScrollTo 플러그인을 사용하여 가로 방향으로 페이지를 이동하는 사이트를 개발해 왔습니다. 각 "페이지"는 100 % x 100 % 섹션으로 내부에는 래퍼 div가 있고 그 다음에는 절대 배치 된 요소가 있습니다.

IE를 제외한 모든 브라우저에서 완벽하게 작동합니다. IE의 모든 버전 (심지어 10)에서 컨텐츠 요소는 사라지고 어떤 방법으로 선택되거나 선택된 경우에만 나타납니다.

Here'squestion의 행동 문제와 dev에 페이지의 비디오 :

그것은 그러나 보통 전혀, 때로는 부분적으로, 시간의 일부를 나타나는 몇 가지 요소, 정말 기괴한와 일치합니다. 창의 크기를 조정하면 현재 뷰포트에있는 요소 만 표시되지만 바깥쪽에 표시되지는 않습니다 (스크롤하여 뒤로 이동하면 다시 글리치가납니다). ScrollTo을 제거하고 기본 앵커 동작을 사용하면 문제가 없지만 내가 할 수있는 다른 방법은 차이를 만드는 것 같습니다.

Google 검색에서 문제가 전혀 발생하지 않았습니다.

콘텐츠의 기본 구조는 효율적이다

<section id="content"> 
    <div class="mask"> 
     <section id="pagename"> 
      <div class="wrap"> 
       <div></div> 
       <div></div> 
      </div> 
     </section> 
     <section> 
      <div class="wrap"> 
       <div></div> 
       <div></div> 
      </div> 
     </section> 
    </div> 
</section> 

CSS : 절대적

다음 페이지의 주위에 위치 .wrap 내의 div의

#content  {width: 100%; height: 100%; overflow: hidden; } 
#content .mask {width: 800%; height: 100%;} 
section  {position: relative; display: block; width: 12.5%; height: 100%; float: left;} 
.wrap   {position: absolute; display: block; top: 50%; left: 50%; height: 860px; margin-top: -430px; width: 860px; margin-left: -430px; overflow: visible;} 

.

모든 것이 실제로 올바른 위치에 있고 콘텐츠가 올바르게 표시됩니다 (표시되면). 그리고 그것은 문제가 시작되는 .wrap의 내용 일뿐입니다 (.wrap에 대한 테스트 배경을 설정하면 문제가되지 않는다는 것을 보여 주며 내용은 내용입니다).

누구든지이 문제의 원인을 밝힐 수 있다면 무엇이 행동하게 될지 깊이 생각해보십시오.

건배, 나단

Answer 1

Alrighty, 나는이 문제를 해결했습니다.

페이지의 다른 부분 (해당 #content 섹션 내에 있지 않음)에는 위치가 고정 된 별도의 div가 있습니다. 어떤 이유로 든 고정 된 상태로 유지하면 스크롤하는 다른 요소에 IE 문제가 발생합니다. 해당 div를 절대 위치 지정으로 변경하면 (이 경우 문제가되지 않습니다. 모든 내용이 #content 섹션에서 수행됨) 모든 차이를 만들었습니다.

jQuery ScrollTo가 모든 스크립트를 제거하고 스크롤바를 가져 오기 위해 #content에 오버플로 자동을 사용하여 문제가없는 것으로 밝혀 졌다는 사실을 추가해야합니다. 고정 된 위치에있는 요소의 맨 위에있는 요소를 스크롤하는 것은 순전히 렌더링 문제입니다.