2012-07-02 11 views
6

Ho fatto un jsFiddle: http://jsfiddle.net/Grezzo/JR2Lu/Perché è ruotatoY (capovolgi) lo sfarfallio di animazione css3 in Chrome?

Quando si preme il tasto i sulla tastiera, l'immagine gira intorno a mostrare un testo, ma durante l'animazione flip sfarfalla (in particolare il testo sfarfalla) se visto in Chrome.

(notare che io sto usando senza -prefix libreria JS in modo che io non devo prefisso con navigatore specifiche proprietà CSS.)

Perché è tremolante e come posso fermarlo?

UPDATE: Flicker è notevole su Chrome 20.0.1132.47 metri lineari su XP, e qualunque sia la versione più recente per OS X 10.7.4 Lion è (io non sono vicino al mio Mac in questo momento di verificare)

+1

Funziona bene qui, Chrome 18 su Linux (menziona SEMPRE la versione del browser quando stai chiedendo informazioni sui problemi specifici del browser). –

+0

@RobW Buon punto - aggiunte le versioni del browser. – Grezzo

+0

È molto strano, lo stesso per me sul mio Mac. Ho scritto un tutorial su questo, e non ho mai visto questo comportamento ... –

risposta

9

Bene questo è un po 'strano Rimuovendo il background-color da .card, funziona bene: http://jsfiddle.net/JR2Lu/3/

sembra che lo styling .card è il problema, probabilmente come normalmente non vede che div.

+1

Signore, sei un genio. Avevo già incontrato il tuo tutorial (http://css3.bradshawenterprises.com/all/), e mi sono riferito ad esso molte volte. È stato molto utile, grazie. – Grezzo

+0

Grazie mille, felice di aiutare! –

+0

Bella scoperta! I miei volti hanno più contenuto e styling, a quanto pare non sfarfalla dove non c'è sfondo o immagine, ma ciò limita l'effetto a casi d'uso banali :( – skrat

Problemi correlati