Android 2.3 Browser Fails to Render some CSS3 2D Transforms

Question

I'm having trouble getting CSS3 2D Transforms to work in Android 2.3 with any browser that uses the default webkit engine (e.g. default browser, Dolphin HD, Amazon Kindle Fire Silk browser, etc). The Android 2.3 webkit engine does support 2D transforms and I have been able to get some sites with 2D transforms to render correctly, just not my site!

Does anyone know any issue in Android 2.3 which may cause a conflict with 2D transforms? Alternatively, is there a good way to just target css for browsers using the Android 2.3 webkit rendering engine? While I am using Modernizr, in this context it does not work because the Android 2.3 browsers test positive for 2D transforms.

Here's my site: http://StevenGerner.com. On the front page, I am rotating two elements -90deg (the site title and an h2 element) and neither will rotate on android 2.3 browsers. I've even tried other css transforms, but nothing seems to transform. If I strip the entire page down to just the basic, then the transform works flawlessly, so there's probably some other conflict on my site, I just can't figure out what! Here's the CSS specific to the transforms:

//Applied to the h2 element which says 'howdy' at the top of the page
    #about-front h2 {
        display: inline-block;
        float: left;
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4)"\9;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: 170% 170%;
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: 170% 170%;
        -ms-transform: rotate(-90deg);
        -ms-transform-origin: 170% 170%;
        -o-transform: rotate(-90deg);
        -o-transform-origin: 170% 170%;
        transform: rotate(-90deg);
        transform-origin: 170% 170%;
        width: 1em;
        text-shadow: -1px 0 #777, 0 2px #333, 2px 0 #333, 0 -1px #777;
    }

//Applied to the site title with a media query between 500px and 750px
    div#site_name {
        display: block;
        line-height: 0.85em;
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4)"\9;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: 160% 130%;
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: 160% 130%;
        -ms-transform: rotate(-90deg);
        -ms-transform-origin: 160% 130%;
        -o-transform: rotate(-90deg);
        -ms-transform-origin: 160% 130%;
        transform: rotate(-90deg);
        transform-origin: 160% 130%;
}

The issue may also apply to Android 2.2; however, I do not currently have any 2.2 devices to test.

I'd really appreciate any thoughts, suggestions, and advice! This is driving me nuts!

Answer 1

Notes

Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.

Gecko 14.0 removed the experimental support for skew(), but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.

Android 2.3 has a bug where input forms will "jump" when typing, if any container div has a -webkit-transform.

source: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

more :https://code.google.com/p/android/issues/detail?id=12451