Android browser not working correctly with tranisition and transform.js

Hi,

I noticed an issue when trying to animate an element's tranform using transition.js and transform.js on the android browser. The issue is that the browser doesn't seem to be setting the final transform property of the element, so if the animation is called twice, the second animation doesn't begin from where the first animation ended, but from where the element was loaded initially.

I have included a small html page that demonstrates this issue. You will notice that the android browser treats the animation differently than other browsers. You will also notice that if you remove the script tag for transition.js, the animation will work as expected.

I tested this using a T-Mobile G2 and a Nexus One both running android 2.3.4.

<html>
<head>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="jquery.transform.js"></script>
    <script type="text/javascript" src="jquery.transition.min.js"></script>
    <style>
        #mydiv {
            background: red; 
            width: 100px; 
            height: 100px;
        }
    </style>
</head>
<body>
<button id="mybutton">Click Me</button>
<div id='mydiv'></div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $('#mydiv').animate({
                transform: 'translate(50px, 10px)'
            }, 'slow', function() {
                    $('#mydiv').animate({
                        transform: 'translate(500px, 0px)'
                    }, 'slow');
            });
        });
    });
</script>
</body>
</html>

louisremi / jquery.transition.js

Android browser not working correctly with tranisition and transform.js #7