CSS perspective not working in Internet Explorer 10 or Firefox

Question

I've got a jQuery image scroller that simulates depth using the perpective and transform: translateZ CSS properties. It renders correctly in Chrome, but not in IE10 or Firefox.

Here is the full project (click on the "Who's coming" menu link to see the image scroller): http://www.girlguiding.org.uk/test/biggig/index.html and here is a jsFiddle of the relevant code: http://jsfiddle.net/moosefetcher/rxCMr/28/ (I'm not sure why, but stackoverflow is telling me I need to include code to link to jsFiddle, so here's the 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;
}

Note that I have tried this both including AND excluding the -ms- prefix on the properties. (The current jsFiddle includes both, as well as -webkit- and -moz-). Anyone know why this might not be working in IE10? Cheers.

Answer 1

Unit of length

IE and Firefox require a unit of length on perspective values (px, em).

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

For Chrome and Safari, the unit of length is optional when using the -webkit prefix.

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

W3C standards

It's safer to add a unit of length to all perspective values. It's more consistent with the W3C standard. It's the one approach that all browsers support. And once Chrome and Safari start supporting perspective without a prefix, it's possible that they'll require a unit of length (for consistency with W3C standards and with other browsers).

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

Note: The current info on w3schools.com is outdated. There's no mention of support for IE10 or Firefox, and their examples do not have a unit of length. The more-recent examples on developer.mozilla.org include a unit of length, consistent with the W3C standards.

Answer 2

It isn’t working as no WebKit browser drops the perspective property. That property either accepts none or a length value. Lengths require a unit, unless the value is 0. If you add a unit, such as px, it works in IE and Firefox.

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

I removed the -ms- property as perspective was added to IE10 without a prefix in the final version. I also moved the unprefixed version last, so that it wins out over the prefixed versions.

I'm not sure why it is working in WebKit. It should drop the property like Firefox and IE, but I guess it is doing error recovery.

Answer 3

I was using Matthew Wagerfield's ParallaxJS and perspective: 4000px but it still wasn't working in IE10/11, while being absolutely fine in Chrome and Firefox.

The markup

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

Defining perspective: 4000px on the .container was fine for FF and Chrome, but it only started working for IE when being defined on the .layer. So maybe check for that. Might have something else to do with the myriad of transform-style: preserve-3d || flat that I've set, but the gist is: check on which selector your perspective is set.