I have to click twice to activate any button action (Ionic/Angular)

Question

I have an app which is an Ionic Project.

in android it is working fine. But when I build and run the project in ios I have to click Every button twice (double tap) in Simulator and in Device also.

I don't know what exactly is the issue. and how to debug.

Is their someone who knows what to do ?

Edit this is happening for Buttons and a tag.

I put this CSS:

  .button:hover
   {background-color:red;}

and when I run my project and click on button then this :hover css is applied and click event not triggers.

Answer 1

On iOS devices, I believe the first touch is seen as 'hovering' in a similar way to when you hover over something with your mouse. Essentially, the first touch on iOS is seen as hover and the second is seen as a real click.

You can listen for .hover events instead of .click events based on the browser, which will be Safari on iOS and Chrome on Android. Although some iOS devices may be running chrome, this could work for the majority of the cases, assuming it is possible with Ionic.