2

Sliceboxを使用しようとしましたが、動作しません。Chrome ではうまく機能し、Opera では素晴らしいフォールバックが表示されますが、Firefox では灰色のボックスしか表示されません。問題は Modernizr csstransforms3d 検出にあると思います。Modernizr が 3D 変換を検出する必要があるかどうかはわかりません。この行動の原因を正確に知っている人はいますか？

4

2 に答える 2

0

コードを読んだ後、その理由を見つけることができました。

すべてのスタイルは-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

于 2012-09-11T16:17:53.240 に答える
-1

互換性がないようです-彼らはそれを認めています：

これらの CSS3 プロパティをサポートするブラウザー (現在は Chrome と Safari) でのみ、Slicebox のクールな 3D 効果を表示できることに注意してください。

于 2012-09-11T14:18:23.513 に答える