Hi guys,
I've finally figured it out. The inline transforms do not work on Android 2.x if there is an element with translate3d above any elements you want to tween.
Here is the basic example of what I'm talking about: http://jsfiddle.net/kBVEd/
That fiddle will not rotate the DIV on Android 2.x (stock browser) but it will change the color. If you remove the translate3d from the CSS or even remove the DIV element which uses the class then everything works perfectly.
I can't explain why an unrelated element with transform3d applied to it will affect the CSS transforms on other elements on the page. I'm not even sure if there is any way GS could get around it either as it's just the browser acting strange...
Here is the code for the full page that you can test with:
<html>
<head>
<title>TRANSLATE 3D ANDROID 2.X BUGS</title>
<style>
.TheClassThatBreaksItAll {
/* REMOVE THE TRANSFORMS AND THE ROTATION WILL WORK */
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
</style>
</head>
<body>
<div id="main">
<div class="TheClassThatBreaksItAll"></div>
<div id="RotateBlock" style="width: 200px; height: 200px; background-color: green;"></div>
</div>
<script src="TweenMax.min.js"></script>
<script>
TweenMax.to('#RotateBlock', 5, { backgroundColor: 'red', rotation: '230deg' });
</script>
</body>
</html>