CSS -webkit-transform: translate() on Android Browser

Question

I can't seem to get the translate property or -webkit-transform working on Android browser correctly, despite success in iOS and every desktop browser.

My 'full' solution is a small jQuery function like this:

$.fn.transition = function (properties, options) {
    var $element = $(this);
    options = $.extend({}, cssDefaults, options);
    properties['webkitTransition'] = 'all ' + options.duration + 'ms ' + options.easing;
    $element.css(properties);
    return this;
};

which is called like this:

$element.css("transform","translate(1000px,0px)");

I've read in some places that Android has broken support for multiple css3 actions at the same time; however even when I replace all of this code with this simple dummy call the transform never happens:

$element.css("-webkit-transform","translate(1000px,0px)");

Am I doing something wrong that is specific to android?

Answer 1

I have just ran into this with

-webkit-transform: translate3d(0,200px,0);

So I am hoping this will help you. I believe this is one of the 'broken' css3 elements in the Android Browser.

I had to sub out the above code with top: 200px;

In your situation, I would try using a simple left such as left: 1000px;

remember your position statement if you need more accurate control