Android WebView: Very laggy button response

I've got a little web app that I made to play with Android's WebView functionality.

I've got some divs that I use as buttons (with onclick attr开发者_StackOverflowibutes). Upon trying out the app (in the device's browser), I immediately noticed a huge amount of lag after tapping a button. The lag comes between when I tap the button and when the browser shows the orange highlight around it.

I did some testing and got some info:

• JavaScript isn't the problem. I unlinked all my scripts and blanked out all the onclick attributes. The performance didn't change.
• CSS3 stuff isn't the problem. I got rid of all the fancy gradients, and the performance didn't change.
• The number of elements isn't the problem. I tried it with just a few elements on the page, and performance didn't change.
• Doctype and meta stuff isn't the problem. I made sure I was using what Android recommends.

I'm really at a loss as to why there's so much lag. I've eliminated everything that could be causing it, but nothing's helped.

Am I missing something?

How can I remove lag after a button is tapped?

---

Basically, click events on mobile browsers are delayed by 300ms. Do you know of the fast button pattern? Basically you can use the touchstart event (which fires without delay).

Here's a complete explanation: http://code.google.com/mobile/articles/fast_buttons.html

---

try insert to the html code

<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=no">

and quick click click click click is no longer a problem (for me. 4.2.2 and WebChromeClient)

---

So, WebView holds each tap event to see if it's a double tap or a touch move event. There is an alternative to binding to touchstart events. If you specify with the viewport meta directive that your WebView shouldn't zoom or scroll, touch events will reach your code immediately (since Gingerbread).

You can find the details on the viewport directive here: http://developer.android.com/guide/webapps/targeting.html

---

As the Google code is very complicated, I implemented my own using Mootools 1.3+:

Element.Events.touch = 
{
    base: 'touchend',
    condition: function(e) 
    {
        return  ((new Date().getTime() - this.startT < 200) && this.valid) ? true : false;
    },
    onAdd: function(fn) 
    {
        this.addEvent('touchstart', function(e)
        {
            this.valid = true;
            this.startT = new Date().getTime();
            this.startX = e.touches[0].clientX;
            this.startY = e.touches[0].clientY;
        });
        this.addEvent('touchmove', function(e)
        {
            if ((Math.abs(e.touches[0].clientX - this.startX) > 10) || (Math.abs(e.touches[0].clientY - this.startY) > 10)) this.valid = false;
        });
    }
};

Just put this code on your page and now use touch event instead of click:

$('id').addEvent('touch', function()
{
    // your code
});

It works by adding a touchend and touchstart event, if they happen in less than 200ms and the touch doesn't get too far it's a valid touch otherwise not.

It worked very well on 2.2 and 4.0