iPad 2 Safari mostra testo e immagini in pixel pixellati

Question

Stiamo sviluppando un'applicazione HTML5 + CSS3 per iPad e iPhone. L'app funziona perfettamente su iPad & su tutti gli iPhone, tuttavia, l'iPad 2 mostra oggetti HTML dom pixellati all'avvio e rimane così, a volte sempre, a volte per alcuni momenti.

L'app è progettata per il tocco e i gesti. Abbiamo usato translate3D per l'accelerazione hardware sugli oggetti a scorrimento. Stiamo anche usando jQuery (v1.7), ma lo scroller che abbiamo progettato è puro javascript, nessun framework lì. jQuery è principalmente usato per trovare/aggiungere/rimuovere oggetti dom e ajax. Tranne jQuery tutto il resto è scritto in-house, inclusi i plugin jQuery che stiamo utilizzando.

Come ho detto, le animazioni sono state ottenute da translate3D. Per gli effetti scorrevoli stiamo cambiando i valori dell'asse x o y di -webkit-transform, e quando viene ricevuto l'evento touchend, si ottiene un'animazione di slancio con javascript, -webkit-transition e translate3D. Mentre l'app è in fase di scrittura, la documentazione di Safari iOS di Apple è molto utilizzata come guida.

Anche se l'app funziona perfettamente su iPad, iPod Touch (2a generazione), iPhone 3gs e iPhone 4, quando si tratta di test su iPad 2 abbiamo iniziato a vedere questo schermo pixellato. La parte più strana è che il contenuto accelerato in 3d è l'unica parte che viene pixellata. Ho allegato due screenshot, uno da iPad, un altro da iPad2. Puoi vedere cosa intendevo (sono presi in momenti diversi dello stesso giorno, quindi il contenuto è diverso, mi dispiace per quello).

Il contenuto principale (le caselle con immagini) può scorrere su e giù con gli eventi di tocco. Su iPad2, solo questa parte è pixellata. Durante lo scorrimento, la pixellation rimane il più delle volte, ma su alcuni test si ripristina dopo pochi secondi.

Inoltre, i contenuti HTML ha questa linea in:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 

stiamo iniziando l'accelerazione hardware attraverso CSS e gli oggetti principali di scorrimento ha questa struttura:

-webkit-transform: translate3d(0,0,0); 

Per sfarfallio correzione , le immagini non sono all'interno di alcun oggetto dom che ha un colore di sfondo e ha questa proprietà:

-webkit-backface-visibility: hidden; 

Per ulteriori sfarfallio prove colore su alcuni casi abbiamo utilizzato questa struttura (ma il contenuto pixellated nella cattura dello schermo non ha questo quello assegnato):

-webkit-perspective: 0; 

L'applicazione non ha 'apple-touch-startup-immagine 'al momento, quindi il nostro primo pensiero è stato che l'acquisizione iniziale di ios è in qualche modo incasinata. Ma non è questo il problema, perché dopo che il contenuto è stato scaricato via wi-fi, la pixellation rimane la stessa.

Se qualcuno si è mai imbattuto in questo o in un problema simile ed è stato in grado di risolverlo, rispondi perché non abbiamo altre idee.

ho cercato di dare quante più informazioni che posso, e qui ci sono gli screenshot che ho promissed:

iPad:

iPad 2:

Answer 1

Provare a rimuovere la trasformazione e riapplicarla immediatamente dopo un timeout:

$("#sliding").css("-webkit-transform: none"); 
setTimeout(
    $("#sliding").css("-webkit-transform", "translate3d(0,0,0)") 
, 0);