Internet Explorer 10 또는 Firefox에서 CSS perspective가 작동하지 않습니다.

Question

perpective 및 transform: translateZ CSS 속성을 사용하여 깊이를 시뮬레이트하는 jQuery 이미지 스크롤러가 있습니다. Chrome에서는 올바르게 렌더링되지만 IE10이나 Firefox에서는 올바르게 렌더링되지 않습니다. 제가 왜 모르겠어요 ( http://jsfiddle.net/moosefetcher/rxCMr/28/ : 관련 코드의 jsFiddle를 http://www.girlguiding.org.uk/test/biggig/index.html 하고 여기에 있습니다 :

다음은 전체 프로젝트 (이미지 스크롤을 볼 수있는 "누가오고있다"메뉴의 링크를 클릭)입니다 하지만 ...) 그래서 여기에 CSS이야, 내가 jsFiddle에 연결하는 코드를 포함 할 필요가 내가 포함 및 특성에 -ms- 접두사를 제외하고 모두이 시도

.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; 
} 

참고 날 유래 말하고있다. (현재 jsFiddle에는 -webkit- 및 -moz-뿐만 아니라 두 가지 모두 포함됩니다. IE10에서이 기능이 작동하지 않는 이유는 누구나 알고 계십니까? 건배.

Answer 1

단위

IE는 파이어 폭스 perspective 값 (px, em)의 길이의 단위를 필요로한다. -webkit 접두사를 사용할 때

크롬과 사파리

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

, 길이의 단위는 선택적이다.

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

W3C 표준

그것은 모든 perspective 값 길이의 단위를 추가하는 것이 안전합니다. W3C standard과 더 일치합니다. 그것은 모든 브라우저가 지원하는 하나의 접근 방식입니다. Chrome과 Safari가 접두어없이 perspective을 지원하기 시작하면 길이 단위를 요구할 수 있습니다 (W3C 표준 및 다른 브라우저와 일관성을 유지하기 위해).

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

참고 :w3schools.com의 현재 정보가 오래된 것입니다. IE10 또는 Firefox에 대한 지원에 대한 언급은 없으며 예제에는 길이 단위가 없습니다. developer.mozilla.org에 대한 최신 예제는 W3C 표준과 일치하는 길이 단위를 포함합니다.

Answer 2

WebKit 브라우저가 perspective 속성을 삭제하지 않으므로 작동하지 않습니다. 해당 속성은 none 또는 길이 값을 허용합니다. 길이가 0 인 경우 단위가 필요합니다. px와 같은 단위를 추가하면 IE와 Firefox에서 작동합니다. 관점 최종 버전에서 접두사없이 IE10에 추가로

는

http://jsfiddle.net/rxCMr/31/ 내가 -ms- 속성을 제거하십시오. 접두어가 붙지 않은 버전을 마지막으로 옮겼습니다. 접두어가 붙은 버전보다 우선합니다.

WebKit에서 왜 작동하는지 잘 모르겠습니다. Firefox 및 IE와 같은 속성을 삭제해야하지만 오류 복구를 수행하고있는 것으로 보입니다. 길이

Answer 3

저는 Matthew Wagerfield의 ParallaxJS과 perspective: 4000px을 사용하고 있었지만 여전히 Chrome과 Firefox에서는 IE10/11에서는 작동하지 않았습니다.

.container에 perspective: 4000px을 정의하는 마크 업

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

FF와 크롬에 대한 좋은, 그러나 그것은 단지 .layer에 정의 될 때 IE를 위해 일하기 시작했다. 어쩌면 그걸 확인해보십시오. 내가 설정 한 무수히 많은 transform-style: preserve-3d || flat과 관련이 있을지 모르지만, 요점은 에 선택자이 설정되어 있는지 확인하십시오.