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

У меня есть скроллер изображений jQuery, который имитирует глубину, используя свойства CSS perpective и transform: translateZ. Он правильно отображается в 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? Ваше здоровье.


css firefox transform internet-explorer-10 perspective
person moosefetcher    schedule 05.04.2013    source источник
comment
Не знаю, считается ли это «ударом», но я только что обнаружил, что IE10 правильно отображает вышеуказанное 3D в режиме «причудливого» режима в инструментах разработчика. Кто-нибудь знает, почему это может быть? И если это вообще полезное откровение?   -  person moosefetcher    schedule 10.04.2013
comment
IE10 в режиме причуд менее соответствует стандартам. Это может быть разрешение значений длины без обязательной единицы длины (и предполагается, что px по умолчанию).   -  person Matt Coughlin    schedule 17.04.2013

Ответы (3)


arrow_upward
10
arrow_downward

Единица длины

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.

person Matt Coughlin    schedule 16.04.2013
comment
Я отправил отчет об ошибке в W3Schools: возможно, они исправят это. В их примере не указаны единицы измерения ни для одного из вариантов. - person Tatiana Racheva; 03.11.2013

arrow_upward
2
arrow_downward

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

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

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

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

person David Storey    schedule 16.04.2013
comment
Большой! Можно ли принять мой ответ? Редактировать: неважно. Я только что увидел, что кто-то еще ответил. - person David Storey; 17.04.2013
comment
Да, извините - все еще не уверен на 100% в отношении этики, но я думал, что другой ответ был немного более подробным. - person moosefetcher; 19.04.2013

arrow_upward
0
arrow_downward

Я использовал 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, которые я установил, но суть такова: проверьте, на каком селекторе установлена ​​ваша перспектива.

person robro    schedule 01.09.2017