Perspektywa CSS nie działa w przeglądarce Internet Explorer 10 lub Firefox

Question

Posiadam kreator obrazu jQuery symulujący głębokość przy użyciu właściwości CSS perpective i transform: translateZ. Wyświetla się poprawnie w Chrome, ale nie w IE10 ani Firefox.

Oto pełny projekt (kliknij na „Kto idzie” link menu, aby zobaczyć scroller zdjęciem): http://www.girlguiding.org.uk/test/biggig/index.html A oto jsFiddle odpowiedniego kodu: http://jsfiddle.net/moosefetcher/rxCMr/28/ (nie jestem pewien, dlaczego, ale stackoverflow mówi mi, że muszą zawierać kod, żeby dodać odnośnik do jsFiddle, więc oto 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; 
} 

Zauważ, że próbowałem to zarówno włączając i wyłączając z -ms- prefiks na właściwości. (Bieżący jsFiddle zawiera oba, a także -webkit- i -moz-). Ktoś wie, dlaczego to nie działa w IE10? Pozdrawiam.

Answer 1

Jednostka długości

IE i Firefox wymaga jednostkę długości na perspective wartości (px, em).

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

Dla Chrome i Safari, jednostka długości jest opcjonalny przy użyciu prefiksu -webkit.

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

standardy W3C

Jest to bezpieczniejsze, aby dodać jednostkę długości do wszystkich wartości perspective. Jest bardziej zgodny z W3C standard. Jest to jedyne podejście, które obsługują wszystkie przeglądarki. A kiedy Chrome i Safari zaczną obsługiwać perspective bez prefiksu, możliwe, że będą wymagały jednostki długości (w celu zachowania zgodności ze standardami W3C i innymi przeglądarkami).

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

Uwaga: Obecny informacji na w3schools.com jest przestarzała. Nie ma wzmianki o obsłudze IE10 lub Firefox, a ich przykłady nie mają jednostki długości. Najnowsze przykłady na developer.mozilla.org zawierają jednostkę długości, zgodną ze standardami W3C.

Answer 2

To nie działa, ponieważ żadna przeglądarka WebKit nie traci właściwości perspektywy. Ta właściwość akceptuje wartość none lub wartość długości. Długości wymagają jednostki, chyba że wartość wynosi 0. Jeśli dodasz jednostkę, taką jak px, działa ona w IE i Firefox.

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

usunąłem właściwość -ms- jako perspektywa została dodana do IE10 bez przedrostka w ostatecznej wersji. Przesunąłem również wersję nieprefiksowaną na ostatnią, aby wygrywała z prefiksowanymi wersjami.

Nie jestem pewien, dlaczego działa w WebKit. Powinien usunąć właściwość, taką jak Firefox i IE, ale domyślam się, że robi to błąd.

Answer 3

Używałem Matthew Wagerfielda: ParallaxJS i perspective: 4000px, ale nadal nie działało w IE10/11, a jednocześnie było absolutnie w porządku w Chrome i Firefox.

Znaczniki

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

Definiowanie perspective: 4000px na .container było w porządku dla FF i Chrome, ale to tylko rozpoczął pracę dla IE, gdy jest określona na .layer. Może sprawdź to. Może mieć coś innego do zrobienia z niezliczoną ilością transform-style: preserve-3d || flat, którą ustawiłem, ale istotą jest: sprawdź , na którym ustawiona jest twoja perspektywa selektora.