Перспектива CSS не работает в Internet Explorer 10 или Firefox

у меня есть скроллер изображений jQuery, который имитирует глубину с помощью perpective и transform: translateZ свойства CSS. Он правильно отображается в Chrome, но не в IE10 или Firefox.

вот полный проект (нажмите на ссылку меню "кто идет", чтобы увидеть скроллер изображения): http://www.girlguiding.org.uk/test/biggig/index.html и вот jsFiddle соответствующего кода: http://jsfiddle.net/moosefetcher/rxCMr/28/ (Я не уверен, почему, но stackoverflow говоря мне, что мне нужно включить код для ссылки на jsFiddle, вот 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;
}

обратите внимание, что я пробовал это как включая, так и исключая -ms- префикс в свойствах. (Текущий jsFiddle включает оба, а также -webkit- и -moz-). Кто-нибудь знает почему это не работает в IE10? Овации.

8
css3 firefox internet-explorer-10 perspective transform

3 ответов

единица длины

IE и Firefox требуют единицы длины на perspective значения (px, em).

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

для Chrome и Safari единица длины является необязательной при использовании -webkit префикс.

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

стандарты W3C

безопаснее добавить единицу длины ко всем perspective значения. Это более соответствует стандарт W3C. Это один подход, который все браузеры поддержка. И как только Chrome и Safari начнут поддерживать perspective без префикса возможно, что им потребуется единица длины (для согласованности со стандартами W3C и с другими браузерами).

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

Примечание: текущая информация о w3schools.com устарел. Там нет упоминания о поддержке IE10 или Firefox, и их примеры не имеют единицы длины. Более свежие примеры наdeveloper.mozilla.org включите блок длина, соответствующая стандартам W3C.

10

он не работает, поскольку браузер WebKit не удаляет свойство perspective. Это свойство либо принимает none или значение длины. Длины требуют единицы измерения, если значение не равно 0. Если вы добавляете блок, такой как px, он работает в IE и Firefox.

см.http://jsfiddle.net/rxCMr/31/

Я удалил - ms-свойство, поскольку перспектива была добавлена в IE10 без префикса в окончательной версии. Я также переместил неподготовленную версию последней, чтобы она победила над префиксные версии.

Я не уверен, почему он работает в WebKit. Он должен отбросить свойство, как Firefox и IE, но я думаю, что он делает восстановление ошибок.

2

я использовал Мэтью Уэйджерфилда ParallaxJS и perspective: 4000px но он все еще не работал в IE10 / 11, будучи абсолютно прекрасным в Chrome и Firefox.

разметки

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

определение perspective: 4000px на .container было хорошо для FF и Chrome, но он начал работать только для IE при определении на .layer. Так что, может, проверим. Возможно, это как-то связано с мириадами transform-style: preserve-3d || flat что я установил, но суть в следующем: check on какой селектор ваша перспектива установлена.

0