Prospettiva CSS non funziona in Internet Explorer 10 o Firefox

Question

Ho uno scroller di immagini jQuery che simula la profondità utilizzando le proprietà CSS perpective e transform: translateZ. Rende correttamente in Chrome, ma non in IE10 o Firefox.

Ecco il progetto completo (cliccare sul link del menu "Chi sta arrivando" per vedere la scroller immagine): http://www.girlguiding.org.uk/test/biggig/index.html ed ecco un jsFiddle del codice rilevante: http://jsfiddle.net/moosefetcher/rxCMr/28/ (io non sono sicuro perché, ma StackOverflow mi sta dicendo che ho bisogno di includere il codice per creare un collegamento a jsFiddle, quindi ecco il css) ...

.scroller { 
    position: relative; 
    perspective: 150; 
    -webkit-perspective: 150; 
    -ms-perspective: 150; 
    -moz-perspective: 150; 
} 
.artistBox { 
    width: 228px; 
    height: 268px; 
    background-color: #000000; 
    border-radius: 16px; 
    position: absolute; 
    overflow: hidden; 
    z-index: 4; 
} 
.artistBox p { 
    position: absolute; 
    font-family:"Arial", sans-serif; 
    color: white; 
    font-size: 22px; 
} 
.artistBoxFront { 
    z-index: 5; 
} 
.artistBoxNew { 
    z-index: 3; 
    opacity: 0; 
} 
.scrollerButton { 
    position: absolute; 
    top: 128px; 
    width: 32px; 
    height: 32px; 
    border: 2px solid white; 
    border-radius: 32px; 
    background-color: #F49D19; 
    box-shadow: 1px 1px 3px #555588; 
    z-index: 6; 
} 
.scrollerButtonOver { 
    background-color: #ffaa26; 
    box-shadow: 2px 2px 3px #555588; 
} 

Nota che ho provato questo sia compreso ed escludendo il prefisso -ms- sulle proprietà. (L'attuale jsFiddle include entrambi, nonché -webkit- e -moz-). Qualcuno sa perché questo potrebbe non funzionare in IE10? Saluti.

Answer 1

Unità di lunghezza

IE e Firefox richiedono un'unità di lunghezza su perspective valori (px, em).

-moz-perspective: 800px; 
     perspective: 800px; 

Per Chrome e Safari, l'unità di lunghezza è facoltativo quando si utilizza il prefisso -webkit.

-webkit-perspective: 800; /* This works with or without the px unit */ 

standard W3C

E 'più sicuro di aggiungere un'unità di lunghezza a tutti perspective valori. È più coerente con lo W3C standard. È l'unico approccio supportato da tutti i browser. E una volta che Chrome e Safari iniziano a supportare perspective senza un prefisso, è possibile che richiederanno un'unità di lunghezza (per coerenza con gli standard W3C e con altri browser).

-webkit-perspective: 800px; 
    -moz-perspective: 800px; 
     perspective: 800px; 

Nota: La corrente informazioni w3schools.com è obsoleto. Non si fa menzione del supporto per IE10 o Firefox, ei loro esempi non hanno un'unità di lunghezza. Gli esempi più recenti su developer.mozilla.org includono un'unità di lunghezza, in linea con gli standard W3C.

Answer 2

Non funziona perché nessun browser WebKit elimina la proprietà della prospettiva. Questa proprietà accetta none o un valore di lunghezza. Le lunghezze richiedono un'unità, a meno che il valore sia 0. Se aggiungi un'unità, come px, funziona in IE e Firefox.

Vedi http://jsfiddle.net/rxCMr/31/

ho rimosso la proprietà -MS- come prospettiva è stato aggiunto al IE10 senza prefisso nella versione finale. Ho anche spostato la versione non prefissata per ultimo, in modo che vinca sulle versioni con prefisso.

Non sono sicuro del motivo per cui funziona in WebKit. Dovrebbe eliminare la proprietà come Firefox e IE, ma suppongo che stia facendo il recupero degli errori.

Answer 3

Stavo usando Matthew Wagerfield ParallaxJS e perspective: 4000px ma ancora non funzionava in IE10/11, pur essendo assolutamente soddisfacente in Chrome e Firefox.

Il markup

<ul class="container"> 
    <li class="layer">...</li> 
    <li class="layer">...</li> 
    <li class="layer">...</li> 
</ul> 

Definizione perspective: 4000px sul .container andava bene per FF e Chrome, ma ha cominciato a lavorare solo per IE quando viene definito sul .layer. Quindi forse controlla per quello. Potrebbe avere qualcos'altro da fare con la miriade di transform-style: preserve-3d || flat che ho impostato, ma l'essenza è: controlla su quale selettore è impostata la tua prospettiva.