이상한 JavaScript 스크롤/렌더링 문제

Question

오늘 나는 매우 이상한 문제에 직면 해있다.

약 10 개의 복합 요소가 포함 된 div를 만들었습니다. 이러한 요소에는 CSS3 전환, 애니메이션 및 번역이 포함 된 여러 div가 포함되어 있습니다.

외부 사업부는 매우 넓고, 스크롤 컨테이너 내부 :

document.getElementById('scroller').style.left = "-150px"; 
// or 
$('#scroller').animate({"left" : "-150px"}, 500); 

: 지금 jQuery를 사용하고

<div id="container"> 
    <div id="scroller"> 
     <div class="animated-element"> 
      [...] 
     </div> 
     <div class="animated-element"> 
      [...] 
     </div> 
     [...] 
    </div> 
</div> 

컨테이너 내부의 스크롤을 이동 (내가 너무 일반 JSS 시도)

이상한 일이 벌어지고 있습니다. 요소를 스크롤 한 후에는 아무 것도 바뀌지 않습니다. 처음에는 스크립트에서 오타 나 무언가라고 생각했습니다.

그러나 스크롤러 위로 커서를 옮기고 이동 한 상태에서 (JS 사용) 변경 사항이 표시되었습니다.

다시 검색하기 위해 많은 검색을했지만 유용한 것은 없습니다.

나는 수천 번처럼 이런 종류의 슬라이더를 만들었습니다. 이것이이 문제가 나를 혼란스럽게 만드는 이유입니다.

나는 사무실에있을 때 내일 피들을 꾸리려고 노력할 것이다. 그러나 누군가가 생각이나 해결책을 얻길 바랍니다. 여기

편집 2

는 Fiddle입니다.

나는 작품을 스크롤하면 내가 하나의 .moreitem의에서 perspective perspective-origin 및 position:relative 속성을 제거하면 것을 알아 냈다. 전체적인 맥락에서 무언가가 중단되는 것처럼 보입니다. 어쨌든 컷 아웃은입니다.

-webkit-box-align:center; 
-webkit-box-orient:horizontal; 
-webkit-box-pack:start; 
display:-webkit-box; 
height:100%; 
position:absolute; 

Answer 1

사파리 동적 콘텐츠를 다시 렌더링하지 않는 글리치하는 경향이있다 :

편집 한 여기 스크롤러의 CSS입니다. 나는 어제 CSS3 컬럼으로이 문제에 부딪혔다. 애니메이션의 한 부분으로,

$('.morecontainer').toggle().toggle(); 

을 또는이 실제 문제에서 산만 문제의 심장, 아니면 그냥 사소한 결함이지만, 애니메이션 후 다시 쓰게 강요하려고하면

확실하지 않음 position:absolute 및 z-index:-1이 .morecontainer 아래에있는 투명 div를 이동 (또는 다른 방법으로 애니메이션) 할 수 있습니다. 그러면 애니메이션의 각 단계에서 다시 렌더링해야 할 수 있습니다.