2011-12-25 10 views
9

Ho un problema davvero strano in cui le trasformazioni CSS 3D funzionano a volte e talvolta no. Prima di passare all'ultima versione di Chrome funzionava sempre, ma con la versione 16 funziona solo a caso.Le trasformazioni CSS 3D funzionano casualmente in Chrome 16

Più in particolare sembra che la prospettiva -webkit non prenda il che rende tutto piatto (anche se gli elementi vengono ancora trasformati). Cambiare la prospettiva in "firebug" di Chrome dopo che la pagina è stata caricata non ha alcun effetto su nessuno dei due.

La pagina in questione è qui: http://exscale.se/__files/uploads/jquery-3d-circle.htm. So che c'è un bel po 'di codice, ma la roba relativa alle trasformazioni 3D sono tutti in questo file CSS: http://code.google.com/p/sleekphp/source/browse/trunk/Sites/SleekBase/Modules/Base/CSS/jQuery.threeDCircle.scss

La mia domanda è: non si verifica lo stesso problema con la mia pagina o hai mai sperimentato da soli? E se sì, puoi pensare a qualcosa che lo innesca?

Vorrei menzionare che sto usando Ubuntu 10.10 e Chrome 16.0.912.63.

+0

Non vedo alcun problema in Chrome 16.09 o Safari su Mac. Forse è un problema di Chrome di Linux? – Scott

+0

Sto riscontrando lo stesso problema in Windows sotto VirtualBox. È così strano che è casuale. – powerbuoy

+0

stesso chrome ma su win7 x64: nessun problema. - su un altro argomento: tieni presente che queste animazioni di genere sono perfette solo su macchine veloci. Ho dovuto passare alle migliori prestazioni sul mio Lenovo X200 per vedere un'animazione fluente ... –

risposta

16

Chromi ha inserito nella blacklist la tua GPU e si rifiuta di fare qualsiasi CSS 3D.

la soluzione è piuttosto semplice: attivare l'opzione "Esegui elenco di software di sostituzione" in "chrome: // flags".

vedere https://github.com/bartaz/impress.js/issues/40

+0

Dolce! Questo è stato. Così strano quando funziona solo a caso (o forse non è stato così casuale come pensavo inizialmente). – powerbuoy

1

Vai alla Chromium web SCM interface e controllare che la vostra GPU non è nella lista nera.

Inoltre, vai a chrome: // gpu/e verifica che Chrome contenga i CSS 3D come abilitati.

1

Ecco qualcosa che ho trovato che potrebbe essere il problema. Quando si utilizza il codice di

-webkit-perspective: 600px; 

È necessario avere che nel genitore dell'elemento si vuole influenzare. Se è nell'elemento reale, deve essere combinato con la trasformazione, ad esempio

-webkit-transform: perspective(600px) rotateY(45deg); 
+1

Immagino che tu non abbia letto l'intero thread, perché se lo facessi noterai che Markus ha trovato la soluzione circa 6 mesi fa. – powerbuoy

+0

Beh, mi ha aiutato a risolvere un problema FF con un cardflip 3D non funzionante. Usa --moz-transform: perspective (600px) rotateY (45deg); –

Problemi correlati