Question

In a web browser, I am trying to pan an image from left to right, such as a panorama.

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 (200×100) as well as large images (1380×550) 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?

Answer 1

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' 
    });