파이어 폭스의 슬라이스 박스

Question

나는 Slicebox을 사용하려고 시도하지만 작동하지 않습니다. Chrome과 Opera에서 훌륭하게 작동합니다.하지만 Firefox에서는 멋진 회색 박스 만 표시됩니다. 문제는 Modernizr csstransforms3d 탐지에 있다고 생각합니다. Modernizr이 3D 변환을 감지해야하는지 잘 모르겠습니다. 누가이 바하 비아를 일으키는 지 정확히 아는 사람이 있습니까?

Answer 1

이 호환 될 것 같지 않습니다 - 그들은 인정 :

당신 만 CSS3 속성 (현재 크롬과 을 지원하는 브라우저에서 Slicebox의 멋진 3D 효과를 볼 수 있습니다 원정 여행).

Answer 2

코드를 읽은 후 이유를 찾을 수 있습니다.

모든 스타일은 -webkit으로 작성되었지만 스크립트는 Modernizr.csstransforms3d을 확인합니다. 따라서 파이어 폭스는 csstransforms3d을 지원하지만 3d 변형 스타일을 적용하려고 시도하지만 파이어 폭스는 접두사가 모두 -webkit 인 모든 스타일을 무시합니다.

내 현재 솔루션이 제대로 모든 스타일을 접두사로 사용하는 것입니다 :

(function($){ 

    if(Modernizr.csstransforms3d) { 
     var prefix = ""; 
     if($.browser.mozilla){ 
      prefix = "-moz-"; 
     }else if($.browser.msie){ 
      prefix = "-ms-"; 
     }else if($.browser.opera){ 
      prefix = "-o-"; 
     }else{ 
      return; 
     } 
    } 

    // Replace -webkit- with the current browser prefix 
    var postProcessStyles = function(styles){ 
     $.each(styles,function(k,v){ 
      styles[k.replace('-webkit-', prefix)] = typeof v === 'string' ? v.replace('-webkit-', prefix) : v; 
      styles[k.replace('-webkit-', '')] = typeof v === 'string' ? v.replace('-webkit-', '') : v; 
     }); 
    } 

    // Inject style processor 
    var orig = $.Slice3d.prototype._configureStyles; 
    $.Slice3d.prototype._configureStyles = function(){ 
     var origReturn = orig.apply(this,arguments), 
      _this = this; 
     postProcessStyles(this.style);  
     $.each(this.sidesStyles, function(k){ 
      postProcessStyles(_this.sidesStyles[k]); 
     }) 
     $.each(this.animationStyles, function(k){ 
      postProcessStyles(_this.animationStyles[k]); 
     })  
     return origReturn; 
    } 

}(jQuery)); 

데모 : http://jsbin.com/onokut/1

코드 : http://jsbin.com/onokut/1/edit