firefox - Firefox 中的切片盒

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

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

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