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

i have designed custom button using jquery mobile , css phonegap mobile app. on clicking button toggles on/off states , css class changed. toggle/change slow on iphone/ipad/android devices. there delay in button rendering toggled css. pretty fast on desktop browsers.

all doing in code :

$("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()' in vain,no effect on performance.

how can optimize further?

thanks help.

this delay put there intentionally. should around 300ms.

whatever people think hybrid applications have lot of disadvantages on native ones. in case, problem click event detection vs swipe events. if both actions instant application can't recognize click event , start event swipe action. because of swipe action needs have advantage , click event work if lasts @ least 300 ms.

it can fixed if replace click event vclick or touchstart event. events don't suffer delay problem.

if want read more take @ other answer regarding difference between click/vclick/tap events. can found here: in jquery mobile, what's diff between tap , vclick?

on other hand, if want leave can fix this 3rd party jquery mobile plugin called fastclick. creates fast responsive buttons without ghost clicks , annoying 300ms delay. try it, may ti.