Crosswalk Cordova - Click delay not fixed by ontouchstart

Question

Basically, I had a CSS button with :active written, but every time I click on the buttons on my phone, there is a delay before switching to the active phase.

CSS:

.btn {...} .btn:active{...}

Then I tried using "touchstart" and "touchend" to add and remove my active class, but there are still delays between normal -> touchstart and touchstart -> touchend.

Jquery:

$(".btn").on("touchstart", function(){
    $(this).addClass("touched");
}).on("touchend",function(){
    $(this).removeClass("touched");
})

How to remove my delay?

Not really an answer, but I would recommend to use a library like FastClick to prevent using constructions like this. You will only have to initialize the library when starting the website and you will no longer have to think about these delays. — Ricconnect, Dec 22 '14 at 08:11
@Ricconnect I problem is the delay, not the organization of my script, but thank you for you effort — Daniel Cheung, Dec 22 '14 at 08:15

score 0 · Accepted Answer · answered Dec 29 '14 at 07:28

Turns out I did not provide enough information.

The problem seems to be a Chrome's bug, box-shadow. I removed all the box-shadow properties and it worked like a charm.

I hope this answer can stay here for others having the same problem. Also, fastclick is not required if you have the meta tag stating width = device width for the newer Chrome.

Crosswalk Cordova - Click delay not fixed by ontouchstart

1 Answers1