webkit translate3d issues (peek-thru)

Question

PhoneGap으로 iOS 앱을 제작하고 있습니다. translate3d CSS 애니메이션을 사용하여 '뒤집기'효과를 만듭니다.

이것은 앞면/뒷면 div가있는 DIV와 추가 스팬 또는 두 개의 요소가있는 간단한 요소에 효과적입니다.

그러나 더 큰 요소, 즉 전체 화면을 뒤집으려고하면 다시 그리기가 발생합니다. 전환을 시작하기 위해 CSS 클래스를 교체하자마자 'bottom'div 부분이 'top'div가 된 다음 플립이 발생하고 다시 팝업됩니다. 그리고 그것을 통해 보여 주는 전체 요소가 아닙니다 ... 요소 회전의 3 차원 회전을 수행 할 축을 따라 분할 된 요소의 절반입니다.

어떤 아이디어 나 이론이 원인 일 수 있습니까? 아이 패드와 앱 모두 Safari의 데스크톱에서 똑같이 발생하므로 웹킷 문제로 보입니다.

CSS 문제 일 수 있습니까? 아니면 사파리가 처리 할 수있는 것보다 큰 배경 이미지가있는 복잡한 중첩 요소를 사용하여 전체 화면 translate3d 회전을 시도하고 있습니까?

업데이트 1 :

나는이 문제의 범위를 좁히는 데 진전을 보였습니다.

나는 translate3d 플립을 할 때 '엿보기'하는 요소가 이전에 translate3d를 통해 배치되었던 자식 요소라는 것을 알게되었습니다. 내가 translate3d로 전환 할

내 '페이지'구조 :

<div id="frontbackwrapper"> 
    <div id="front">  
    </div><!--/front--> 
    <div id="back"> 
    </div><!--/back--> 
</div><!--/frontbackwrapper--> 

이 그 자체에서 작동합니다. 앞쪽 div는 뒤쪽 div로 대체되고 카드 뒤집기 효과가 적용됩니다.

<div id="frontbackwrapper"> 
    <div id="front"> 

     <div class="modal"></div> 

    </div><!--/front--> 
    <div id="back"> 
    </div><!--/back--> 
</div><!--/frontbackwrapper--> 

예 CSS :

.modal { 
    width: 800px; 
    height: 568px; 
    position: absolute; 
    left: 112px; 
    z-index: 100; 
    -webkit-transition-duration: 1s; 
    -webkit-transform: translate3d(0,-618px,0); /* set off screen by default */ 
} 
.modal.modalOn { 
    -webkit-transform: translate3d(0,80px,0); /* slides the div into place */ 
} 

혹시 ...

문제는 이전에 전체 페이지 플립을하고, 나는 이미 #front 사업부 사용 translate3d 내에서 일부 요소를 애니메이션 한 것입니다 translate3d 대신에 top 스타일로 div의 위치를 ​​변경하거나 top 속성을 변환하면 필자는 엿보기 문제가 발생하지 않습니다. 물론, 그것은 매끄러운 애니메이션이나 하드웨어 가속을 포기해야한다는 것을 의미합니다.

이 시점에서 웹킷 버그처럼 보입니다. 나는 그걸 가지고 노는 것을 계속할 것이다. 이전에 누군가가이 문제에 부딪혀 해결 방법을 발견하면 나는 모두 귀입니다!

Answer 1

용액! 잠의 밤 이후에, 나는 범인을 망설이고 그걸로 뭘 해야하는지. translate3d를 사용하여 자식 요소에 애니메이션을 적용하는 행위가 반드시 필요한 것은 아니지만, 번역 된 요소가 부모 인 경우 translate3d를 사용하여 애니메이션을 적용 할 때 CSS 속성을 사용한다는 사실을 알 수 있습니다.

해결 방법은 먼저 하위 요소를 애니메이션화 한 다음 모두 번역 스타일을 함께 제거하는 것입니다.

/* default class for the start of your element */ 
.modal-startposition { 
    -webkit-transition-duration: 1s; 
    -webkit-transform: translate3d(0,-618px,0); 
    } 

/* add this class via jQuery to then allow 
    webkit to animate the element into position */ 
.modal-animateposition { 
    -webkit-transform: translate3d(0,80px,0); 
} 

/* when animation is done, remove the above class 
    and replace it with this */ 
.modal-endposition { 
    top: 80px; 
} 

그리고 몇 가지 예제 jQuery를 :

CSS의 구조 것은 지금 약간 지루한

//[attach a click event to trigger and then...] 
$myModal 
    .addClass("modal-animateposition") 
    .on('webkitTransitionEnd',function() { 
     $myModal 
      .removeClass('modal-startposition') 
      .removeClass('modal-animateposition') 
      .addClass('modal-endposition'); 
    }); 

하지만 완전히 화면을 다시 그리는 문제를 해결합니다.

편집 : 나는, 덕분에이에서 무언가를 배운 오타에게

Answer 2

DA, 가 수정되었습니다. 또한 은 css attrbibutes, 'translate3d'및 'left'를 기록합니다. 번역 및 위치 지정은 약간 다릅니다. 테스트 해보고 x 축에서 요소 100px를 변환하고 'left'스타일 속성을 0px로 설정합니다. 확인, 현재 변환 지점에서 x 축에 0px에 배치됩니다 (x 축에서 100px에서 시작).

translate3d가 offsetLeft 또는 'left'스타일 속성을 더 이상 업데이트하지 않으므로 드래그/드롭 및 애니메이션 알고리즘에서 수학적 오류가 발생하고 쉽게 알아볼 수 있습니다 (글리치, 스킵, 위치 재설정 재설정). 리플 로우 (reflow), 최적화를 위해), 왼쪽 요소를 파싱하는 것은 translate3d 또는 left가 사용되는지 여부를 기반으로합니다. 게임 개발자라면 내부 변수에서 x, y를 추적하는 것이 요소 위치와 동기화 상태를 유지하는 방법입니다. 희망이 더 도움이됩니다.