problemas de webkit translate3d (peek-thru)

Estoy construyendo una aplicación de iOS con PhoneGap. Estoy usando animaciones CS3 de translate3d para crear el efecto 'flip'.

Esto funciona muy bien en elementos más simples … un DIV con divs frontal / posterior y tal vez un palmo o dos adicionales.

Pero cuando bash voltear un elemento más grande … es decir, toda la pantalla, obtengo problemas técnicos de volver a dibujar. ¿Qué sucede tan pronto como cambio la class css para comenzar la transición, partes del div 'inferior' pasan a través del div 'superior', luego ocurre el flip, luego salen de nuevo. Y no es todo el elemento que se muestra a través … es la mitad del elemento dividido a lo largo del eje en el que estoy haciendo la rotation en 3D de conversión.

¿Alguna idea o teoría sobre qué podría estar causando esto? Ocurre lo mismo tanto en el iPad como en una aplicación y en el escritorio en Safari, por lo que parece ser un problema de webkit.

¿Podrían ser algunos problemas de CSS? ¿O está intentando hacer una rotation a pantalla completa de translate3d con elementos nesteds complejos con grandes imágenes de background más de lo que Safari puede manejar?

ACTUALIZACIÓN 1:

He progresado en networkingucir el problema.

Lo que está sucediendo es que los elementos que "miran a escondidas" cuando hago el flip translate3d pasan a ser elementos secundarios que previamente habían sido posicionados a través de translate3d.

Mi estructura de 'página' con la que quiero hacer la transición con translate3d:

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

Esto funciona por sí mismo. El div frontal se reemplaza con el div posterior con un efecto de flip de tarjeta.

El problema es que antes de hacer el cambio de página completo, ya he animado algunos elementos dentro del #front div usando translate3d:

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

Ejemplo 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 */ } 

Si, en lugar de usar translate3d, simplemente reposiciono el div con un estilo top o transformo la propiedad top , no entiendo el problema. Por supuesto, eso significa que tengo que renunciar a la animation mancha o aceleración de hardware, respectivamente.

En este punto, parece un error de webkit. Seguiré jugando con eso. Si alguien se ha topado con esto antes y ha encontrado una solución, ¡soy todo oídos!

¡solución! Después de una noche de sueño, reflexioné sobre el culpable y qué hacer con él. No es necesariamente el acto de animar un elemento hijo con translate3d sino más bien la cara que el elemento que se tradujo tiene esa propiedad CSS en el momento en que se está animando a su padre con translate3d.

La solución es primero animar el elemento secundario, luego eliminar el estilo de traducción todo junto.

La estructura de CSS ahora es:

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

Y algo de muestra jQuery:

 //[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'); }); 

Un poco tedioso, pero soluciona por completo el problema de networkingibujar la pantalla.

EDIT: corrigió un error tipográfico

DA, aprendí algo de esto, gracias. Además, tome nota de los css attrbibutes, 'translate3d' y 'left'. La traducción y el posicionamiento son un poco diferentes. Pruébelo, traduzca un elemento 100px en eje x, establezca su atributo de estilo 'izquierdo' en 0px. Verifique que se posicionará a 0px en el eje x desde el punto de traducción actual (comenzando desde 100px en el eje x).

Eso produce errores matemáticos en drag and drop y algorithms de animation y se nota fácilmente (networkingiseñar fallas, saltos, position de reinicio) y se convierte en un desafío porque translate3d ya no actualiza los elementos offsetLeft o 'left' style attribute (para evitar reflujo, para optimization ), por lo que analizar los elementos reales a la izquierda, se basa en saber si se estaba utilizando translate3d o izquierdo. Si usted es un desarrollador de juegos, rastrear la x, y en las variables internas es la manera de mantenerse sincronizado con la position de los elementos. Espero que ayude más.