Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS perspective not working in Internet Explorer 10 or Firefox

CSS perspective not working in Internet Explorer 10 or Firefox

Problem

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.

Problem courtesy of: moosefetcher

Solution

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.

Solution courtesy of: Matt Coughlin

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS perspective not working in Internet Explorer 10 or Firefox

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×