I have been experiencing a delay issue when using a CSS button with the ":active" pseudo-class on my phone. Every time I click the buttons, there is a noticeable delay before entering the active phase.
Here is my CSS code:
.btn {...} .btn:active{...}
To address this problem, I attempted to use "touchstart" and "touchend" events in jQuery to add and remove an active class. However, even with this approach, I still encounter delays between the normal state -> touchstart and touchstart -> touchend transitions.
This is the Jquery code I used:
$(".btn").on("touchstart", function(){
$(this).addClass("touched");
}).on("touchend",function(){
$(this).removeClass("touched");
})
I am seeking guidance on how to eliminate this delay issue. Any help is appreciated!