What is the fastest JavaScript method of updating an elements position on Android Tablets (os 3.0+)

In a web browser, I am trying to pan an image from left to right, such as a panoram开发者_JS百科a.

I am using jQuerymobile and its normalized events for vmousedown, vmousemove and vmouseup to detect a user touching the browser. I'd like to move the image touched left and right to view around the panorama smoothly.

All 3 events work fine. I keep track of the number of vmousemove events that happen and almost as many fire as the desktop. Every time the vmousemove event fires I update the images position. Despite seeing the event fire dozens and dozens of times, the javascript moving the image does not move once per event as intended. It does on the desktop, but not on the Android Tablet. The image moves approximately 2 or 3 times per second despite almost 30 movement events firing off.

I have tried this with small images (200x100) as well as large images (1380x550) and both perform identically poor only on my tegra 2 dual core Android Tablet.

On a mobile android phone (HTC Evo 4G snapdragon 1ghz) or iPad (1 and 2) the image moves smoothly where you touch. ONLY on an Asus Transformer (latest firmware and OS) does this excessive bogging happen.

Has anyone figured out why DOM manipulation happens so slowly on the default browser on an Android tablet running 3.x?

I have used a pre-defined JS reference to the object to manipulate the $(obj).css('left','xxx'); and obj.style.left = '###px'; and neither perform better. I'm trying to figure out why the performance is terrible. Ideas?

Fastest method to move things around on mobile devices (Android, iOS, Blackberry) is by using 2D CSS3 transforms. I've described this quite extensive in this blogpost (but it's in Dutch :-) ). It took me two weeks or something and a lot of experimenting (Canvas, normal DOM, CSS, etc. etc.), but the result is quite smooth on all modern mobile devices. We use it for the photo gallery on our mobile site.

This is basically the only way to get moving things smooth on all devices:

   scroller.self.css({ 
        '-webkit-transform': 'translate3d(' + -x + 'px,0px,0px)', 
        '-webkit-transition-duration': '0ms', 
        '-webkit-backface-visibility': 'hidden', 
        '-webkit-transition-property': '-webkit-transform' 
    }); 

Jan Jongboom's code does work much smoother but causes tearing on the unrevealed left and right side on my Transformer tablet if I use translate3d(). There is no tearing and it appears to work identically if I use 2d. Perhaps sniff the device and adjust accordingly.