Css :active not fired onTouchStart

Aarbel commented 7 years ago

Hi react-fastclick team !

Problem

HTML

<button>
    Hello
</button>

CSS

button:active {
    background-color : red;
}

Button:active pseudo-class isn't fired instantly on onTouchStart when react-fastclick is installed.
The button:active is fired with a 300ms delay, when the button is hold.
If the user taps fast, he doesn't see the style change.

Expected behavior

Css :active pseudo-class is commonly fired on onTouchStart. We use this pseudo class to make our interface more appealing on mobile devices (we use Cordova). Each time our user touchStart a button, the style instantly changes to make the interface more "reactive".

How to reproduce

How to reproduce :

install react-fastclick
enjoy tapping on an element with :active pseudo class
i use an Iphone, i didn't tried on Android if the problem is similar

How could we fix this issue ?

Thanks !

henrysworld commented 7 years ago

Hello, I also encountered the same problem, please ask this question, you have found a solution?

JakeSidSmith commented 7 years ago

Hey, sorry, somehow I didn't notice this issue. Will have a look whenever I get a chance. :)

JakeSidSmith commented 7 years ago

@Aarbel could you fork from this branch: https://github.com/JakeSidSmith/react-fastclick/pull/56 and try to reproduce. Send me a link in reply to this issue and let me know what iPhone & version of iOS the issue appears on. I have tried to reproduce on several iPhone simulators, but don't appear to be able to.

Aarbel commented 6 years ago

@JakeSidSmith which iPhone simulator do you use ? Thanks a lot for your corrections, i'll test it next week ;)

JakeSidSmith commented 6 years ago

@Aarbel might also be worth trying out the original https://github.com/ftlabs/fastclick as it appears to work nicely with React now. I may end up deprecating this library in favor of ftlabs' fastclick.

JakeSidSmith / react-fastclick