8

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.

David Storey
  • 29,166
  • 6
  • 50
  • 60
moosefetcher
  • 1,841
  • 2
  • 23
  • 39
  • Don't know if this counts as a 'bump' but I've just found that IE10 renders the above 3D correctly in the 'quirks' mode option on developer tools. Anyone know why that might be? And if that's a helpful revelation at all? – moosefetcher Apr 10 '13 at 11:43
  • IE10 in quirks mode is less standards-compliant. It may be allowing length values without a required unit of length (and assuming `px` by default). – Matt Coughlin Apr 16 '13 at 22:09

3 Answers3

10

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.

Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59
  • 1
    I submitted an error report to W3Schools: maybe they'll fix it. Their example doesn't specify units for either of the variants. – Tatiana Racheva Nov 03 '13 at 05:49
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.

David Storey
  • 29,166
  • 6
  • 50
  • 60
0

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.

robro
  • 1,730
  • 23
  • 26