CODEWITHSUNDEEP
androidhtmlcss
Parag Gajjar
Parag Gajjar

Reputation: 730

rotate3D of CSS3 transform is not working in Android

I've created one App using Phonegap and HTML5 (jqueryMobile). I've put rotate3D for one div,

it is working fine in google chrome and Safari, but it is not working in Android 2.3+ Any suggestion?

Upvotes: 1

Views: 764

Answers (2)

albanx
albanx

Reputation: 6335

I think It is a bug of android browser. I make a function to test if rotate3d is supported and it says Yes:

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'));

Upvotes: 1

Yukul&#233;l&#233;
Yukul&#233;l&#233;

Reputation: 17062

As you can see her, CSS transforms3D are not supported by Android 2.3 : http://caniuse.com/#feat=transforms3d

try to upgrade to Android 4 (it works for me)

Upvotes: 0

Related Questions