Change in button css very slow in iOS/Android devices for Phonegap app

Question

I have designed a custom button using jquery mobile and css for my Phonegap mobile app. On clicking the button just toggles on/off states and the css class is changed. However the toggle/change is too slow on iPhone/iPad/Android devices. There is some delay in the button rendering the toggled css. Its actually pretty fast on desktop browsers.

All I am doing in the code is :

$("input[id='someid']").closest('div').removeClass("buttonUp ").addClass("buttonDown");
$("input[id='someid']").closest('div').removeClass("buttonDown").addClass("buttonUp");

CSS:

            .buttonDown {
                border:1px solid #000;font-weight:bold; cursor:pointer; text-shadow:0 1px 1px #000; text-decoration:none; background:#8FFFDD;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#8FFFDD), color-stop(100%,#72ccb1));background-image:-moz-linear-gradient(top, #72ccb1 0%, #8FFFDD 100%);background-image:-webkit-linear-gradient(top, #8FFFDD 0%,#72ccb1 100%);background-image:-o-linear-gradient(top, #8FFFDD 0%,#72ccb1 100%);background-image:-ms-linear-gradient(top, #8FFFDD 0%,#72ccb1 100%);background-image:linear-gradient(to bottom, #8FFFDD 0%,#72ccb1 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#8FFFDD', endColorstr='#72ccb1',GradientType=0 );color:#3D6AFF;
            }   


            .buttonUp {
                border:1px solid #000;font-weight:bold; cursor:pointer; text-shadow:0 1px 1px #000; text-decoration:none;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#DD3B1B), color-stop(100%,#b12f16));background-image:-moz-linear-gradient(top, #b12f16 0%, #DD3B1B 100%);background-image:-webkit-linear-gradient(top, #DD3B1B 0%,#b12f16 100%);background-image:-o-linear-gradient(top, #DD3B1B 0%,#b12f16 100%);background-image:-ms-linear-gradient(top, #DD3B1B 0%,#b12f16 100%);background-image:linear-gradient(to bottom, #DD3B1B 0%,#b12f16 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#DD3B1B', endColorstr='#b12f16',GradientType=0 );color:#000000;
            }

I tried 'toggleClass()' but in vain,no effect on performance.

How can I optimize this further?

Thanks for any help.

Answer 1

This delay is put there intentionally. It should be around 300ms.

Whatever people think hybrid applications have a lot of disadvantages over a native ones. In this case, problem is click event detection vs swipe events. If both actions are instant application can't recognize what is click event and what is a start event for a swipe action. Because of this swipe action needs to have an advantage and click event will work only if it lasts at least 300 ms.

It can be fixed if you replace click event with vclick or touchstart event. This events don't suffer from delay problem.

If you want to read more about this take a look at my other answer regarding a difference between click/vclick/tap events. It can be found here: In jQuery mobile, what's the diff between tap and vclick?

On the other hand, if you want to leave everything as it is you can also fix this with this 3rd party jQuery Mobile plugin called Fastclick. what it does is it creates fast responsive buttons without ghost clicks and the annoying 300ms delay. Try it, you may like ti.