Firefox 中的切片盒答案

【问题标题】：Slicebox in FirefoxFirefox 中的切片盒
【发布时间】：2012-07-22 07:49:17
【问题描述】：

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

【问题讨论】：

标签： firefox 3d transform modernizr css-transforms

【解决方案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

【讨论】：

不要这样做。这将在 Firefox 和 Opera 中中断，它们不再为转换添加前缀
在 postProcessStyles 中使用Modernizr.prefixed('transform')。它会正确地告诉你使用什么样式属性。 modernizr.com/docs/#prefixed
感谢@PaulIrish 我试过Modernizr.prefixed(k.replace('-webkit-', '')) 但这只会导致奇怪的效果。我添加了一行来删除代码中的前缀。你怎么看？

【解决方案2】：

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

请注意，您只能在支持这些 CSS3 属性的浏览器（当前为 Chrome 和野生动物园）。

【讨论】：