CODEWITHSUNDEEP
androidjquery-uicssjquery-mobilecss-transitions
Mohit Srivastava
Mohit Srivastava

Reputation: 1919

CSS3 animation issue on android browsers

I am making an HTML5 application and i have used CSS3 transformations (css3 rotate) for rotating an arrow from its one end using jQuery ui draggable. I have integrated jQuery UI Touch Punch library (v0.2.2) to imitate that drag event on touch devices like Ipad and tablets.

The arrow is rotating smoothly on all platforms except Android tablets (4.1). It seems like I am getting a kind of lag and it rotates in frames (the arrow rotates after 3-4 seconds of rotating my finger on device) or it fails to detect my touch on time. I have tested this on many tablets so I am pretty sure its not a hardware issue. After looking up on internet I found out that there are problems for css3 animations on android regarding the transformations. But I don't think that's the reason.

Here is my code. Although I'm sure that the performance issue is not related to the code, but if you still feel that, please feel free to comment and improve it performance wise. If there are other libraries available that would implement the same features as jquery touch punch, I am willing to test them out also. Please suggest.

$('#arrow').draggable({
    handle: '#arrow',
    opacity: 0.01,
    helper: 'clone',
    refreshPositions: true,
    cursorAt : {left: 0 , top: 0},
    drag: function(event, ui){
        var curr_x = ui.offset.left;
        var curr_y = ui.offset.top;
        var radians = Math.atan2(curr_x - 40, curr_y - 500);
        var degree = (radians * (180 / Math.PI) * -1) + 90;
        var rotateCSS = 'rotate(' + degree + 'deg)';
         $(this).css({
                'transform': rotateCSS,
                '-moz-transform': rotateCSS,
                '-webkit-transform': rotateCSS,
                '-ms-transform': rotateCSS,
                '-o-transform': rotateCSS,
         });
     }
});

Upvotes: 2

Views: 663

Answers (1)

Jai
Jai

Reputation: 2206

Theres nothing wrong with your code, and unfortunately android browser changes quite dramatically between versions so its likely this lag will only affect a small potion of users for a small period of time.

The only way I can think to optimise your process is to drop the jquery ui draggable (jQuery UI is well know for being very convoluted and inefficient) and instead write the functionality using either core js or simple jquery in conjunction with a small footprint touch library such as http://eightmedia.github.io/hammer.js/

However although i can't check without an example in my opinion your issue is simply a lack of up to date support for cssTransitions on android 4.1 or a lack in processing power on said laptop.

One other thing to keep in mind is jquery draggable will use .animate() to move things rather than .css() so in many cases transitions will be rendered useless as the jquery will be causing a lack in performance.

You may have resolved this by now, but hope the info helps.

Upvotes: 1

Related Questions