I'm experiencing a problem with my web application specifically on Safari for iPad. I have to click twice in order to actually perform the click on the <a> tag. The first click triggers a hover effect, similar to when you hover with a mouse on desktop. My application is built using AngularJS. Interestingly, when testing on Firefox, it works without any issues. Below is a snippet of the code where the problem occurs:
<ul class="navigation">
<li class="navigation-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
<a [routerLink]="['/']" class="navigation-link" role="button">
menu1
</a>
</li>
<li class="navigation-item" [routerLinkActive]="['active']">
<a [routerLink]="[myRoute]" class="navigation-link" role="button">
menu2
</a>
</li>
<li class="navigation-item" [routerLinkActive]="['active']">
<a [routerLink]="[myRoute2]" class="navigation-link" role="button">
menu3
</a>
</li>
</ul>
I've attempted solutions like adding (onclick)=" " or ng-onclick=" " or style="cursor:pointer" to prevent the hover from triggering, but unfortunately none of these approaches have resolved the issue.
Your assistance with this matter would be greatly appreciated.