Firefox中的Slicebox

Question

我尝试使用Slicebox，但我无法使用它。它在Chrome和Opera中运行良好我看到了一个很好的后备 - 但在Firefox中我只得到灰盒子。我认为问题出在Modernizr csstransforms3d检测中。我不确定Modernizr是否应该检测到3d变换。有谁知道究竟是什么导致了这种行为？

Answer 1

阅读完代码后，我可以找到原因。

所有样式都使用-webkit前缀编写，但脚本会检查Modernizr.csstransforms3d。 因此，当firefox支持csstransforms3d时，它会尝试应用3d变换样式，但是firefox会忽略所有带有-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

Answer 2

它似乎不兼容 - 他们承认：

  

请注意，您只能看到Slicebox的酷3D效果   支持那些CSS3属性的浏览器（目前是Chrome和   的Safari）。