Todos

Estou trabalhando em um aplicativo Web especificamente para o iPad e estou usando uma transição CSS3 para animar uma div (mova-a da esquerda para a direita

Minha classe fica assim:

.mover {
    -webkit-transition:all 0.4s ease-in-out;
}

Quando o usuário clica em um botão, eu faço o seguinte:

var s = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);

Isso funciona muito bemEXCET aPRIMEIR hora em que o usuário aciona a transição; pela primeira vez, há um tremor muito perceptível.

Percebo que não preciso usar o translate3d, pois estou apenas movendo a div para a esquerda e para a direita, mas, pelo que entendi, isso força o iPad a usar a aceleração da GPU. (Isso está correto?)

Muito obrigado antecipadamente

[ATUALIZAR

Eu era um pouco ambíguo sobre o "flicker". Em suma - eu tenho experimentado uma grande variedade de transições CSS3 (especificamente no iPad) e de forma consistente - eu notei uma oscilação distinta nocomeça oufi da transição.

Em outras palavras, as próprias transições são MUITO suaves. No entanto, dependendo das configurações precisas, há um tremor perceptível logo antes do início ou término da transição.

Aqui está outro exemplo: tenho três fotos (PNGs) empilhadas umas sobre as outra

O PNG inferior tem opacidade = 1,0, os 2 principais têm opacidade = 0,0. Usando -webkit-keyframes, sou capaz de obter transições suaves e sedosas à medida que as fotos entram e saem. Quando a animação termina, a foto inferior termina em opacidade = 1,0, as duas principais na opacidade = 0,0. (Esse deve ser o estado final).

No entanto, assim que a animação termina, a foto inferior pisca. É como se o navegador tivesse forças para redesenhar / repintar a tela, e isso leva algumas frações de segundo.

Já é ruim o suficiente para estragar o efeito e tornar as transições inutilizáveis. (No meu iMac équas, mas não completamente imperceptível. No iPad, é imperdível).