android - AndroidでCSS3変換のrotate3Dが動作しない

Question

Phonegap と HTML5 (jqueryMobile) を使用して 1 つのアプリを作成しました。1つのdivにrotate3Dを配置しました。

google chrome と Safari では正常に動作していますが、Android 2.3 以降では動作していません 何か提案はありますか?

Answer 1

Androidブラウザのバグだと思います。私は、rotate3d がサポートされているかどうかをテストする関数を作成し、はいと言います:

function styleSupport( prop ) 
{
    var vendorProp;
    var supportedProp;
    // capitalize first character of the prop to test vendor prefix
    var capProp     = prop.charAt(0).toUpperCase() + prop.slice(1);
    var prefixes    = [ "Moz", "Webkit", "O", "ms" ];
    var div         = document.createElement( "div" );

    if ( prop in div.style ) 
    {
        //browser supports standard CSS property name
        supportedProp = prop;
    } 
    else 
    {
        //otherwise test support for vendor-prefixed property names
        for ( var i = 0; i < prefixes.length; i++ ) 
        {
            vendorProp = prefixes[i] + capProp;
            if ( vendorProp in div.style )
            {
                supportedProp = vendorProp;
                break;
            }
        }
    }
    // avoid memory leak in IE
    div = null;    
    return supportedProp;
}
alert(styleSupport('perspective'));
alert(styleSupport('transform'));

Answer 2

ご覧のとおり、CSS transforms3D は Android 2.3 ではサポートされていません: http://caniuse.com/#feat=transforms3d

Android 4 へのアップグレードを試みます (これで動作します)。