CSS-Perspektive funktioniert nicht in Internet Explorer 10 oder Firefox

Habe ich einen jQuery image scroller simuliert, dass die Tiefe mit der perpective und transform: translateZ CSS-Eigenschaften. Macht es richtig, in Chrome, aber nicht im IE10 oder Firefox.

Hier ist das komplette Projekt (klicken Sie auf die "Wer kommt" Menü-link, um zu sehen das Bild Scrollers):
http://www.girlguiding.org.uk/test/biggig/index.html
und hier ist ein jsFiddle der relevante code:
http://jsfiddle.net/moosefetcher/rxCMr/28/
(Ich bin mir nicht sicher, warum, aber stackoverflow ist sagen mir, ich muss code enthalten, um einen link zu jsFiddle, also hier ist der 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;
}

Beachten Sie, dass ich versucht habe, dies einschließlich UND ohne -ms- Präfix auf die Eigenschaften. (Die aktuelle jsFiddle umfasst sowohl, als auch als -webkit- und -moz-).
Wer weiß, warum das möglicherweise nicht funktioniert in IE10?
Cheers.

Weiß nicht, ob das zählt als eine 'Beule', aber ich habe gerade festgestellt, dass IE10 rendert die 3D richtig in die 'Macken' - Modus-option, über die Entwickler-tools. Weiss jemand warum das sein könnte? Und wenn das eine hilfreiche Offenbarung überhaupt?
IE10 im quirks-Modus ist weniger Standard-konform. Es kann sein, wodurch die Länge-Werte ohne eine erforderliche Einheit der Länge (und unter der Annahme px standardmäßig).

InformationsquelleAutor moosefetcher | 2013-04-05

10

Die Einheit der Länge

IE und Firefox erfordern eine Längeneinheit auf perspective Werte (px, em).
```
   -moz-perspective: 800px;
        perspective: 800px;
```
Für Chrome und Safari, die die Einheit der Länge ist optional wenn die -webkit Präfix.
```
-webkit-perspective: 800;    /* This works with or without the px unit */
```
W3C-standards

Ist es sicherer, fügen Sie eine Einheit der Länge, um alle perspective Werte. Es ist mehr im Einklang mit der W3C-standard. Es ist der eine Ansatz, der von allen Browsern unterstützt. Und einmal Chrome und Safari starten Sie unterstützen perspective ohne Präfix, ist es möglich, dass Sie benötigen, Einheit der Länge (für die Konsistenz mit den W3C-standards und mit anderen Browsern).
```
-webkit-perspective: 800px;
   -moz-perspective: 800px;
        perspective: 800px;
```
Hinweis: Das aktuelle info auf w3schools.com veraltet ist. Es gibt keine Erwähnung der support für IE10 oder Firefox, und Ihre Beispiele nicht eine Einheit der Länge. Die mehr-aktuelle Beispiele auf developer.mozilla.org umfassen eine Einheit der Länge in übereinstimmung mit den W3C-standards.
- Danke für die Antwort! Das ist das Kunststück fertig.
- Ich habe einen Fehler-Bericht an W3Schools: vielleicht werden Sie es lösen. Ihr Beispiel nicht angeben, Einheiten für eine der Varianten.
InformationsquelleAutor Matt Coughlin
2

Es nicht so funktioniert wie kein WebKit-browser fällt die Perspektive-Eigenschaft. Diese Eigenschaft entweder akzeptiert none oder eine Längeneinheit. Längen erfordern eine Einheit, es sei denn, der Wert 0 ist. Wenn Sie hinzufügen, eine Einheit wie px, funktioniert es in IE und Firefox.

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

Habe ich entfernt -ms - Eigenschaft als Perspektive wurde Hinzugefügt, IE10 ohne Präfix in der finalen version. Ich zog auch die unprefixed Letzte version, so dass es gewinnt über die Präfix-Versionen.

Ich bin mir nicht sicher, warum es funktioniert in WebKit. Es sollte drop die Eigenschaft wie Firefox und IE, aber ich denke, es ist zu tun, Fehler-recovery.
- Danke für die Antwort. Es war in der Tat, die fehlenden Einheiten.
- Super!!! Wäre es möglich, akzeptieren Sie meine Antwort? Edit: never mind. Ich habe gerade gesehen, dass jemand anderes auch beantwortet.
- Ja, sorry - Noch nicht 100% sicher über die etiquitte hier, aber ich dachte, die andere Antwort war etwas Ausführlicher.
InformationsquelleAutor David Storey
0

War ich mit Matthew Wagerfield ist ParallaxJS und perspective: 4000px aber es noch nicht funktioniert in IE10/11, während es absolut in Ordnung in Chrome und Firefox.

Markup
```
<ul class="container">
    <li class="layer">...</li>
    <li class="layer">...</li>
    <li class="layer">...</li>
</ul>
```
Definieren perspective: 4000px auf die .container war in Ordnung für FF und Chrome, aber es begann erst die Arbeit für den IE, wenn definiert auf der .layer. Also vielleicht testen. Vielleicht haben Sie etwas anderes zu tun, mit der Vielzahl von transform-style: preserve-3d || flat dass ich eingestellt habe, aber das wesentliche ist: überprüfen Sie auf dem Selektor deine Perspektive festgelegt ist.

InformationsquelleAutor robro

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.