I've read the articles on stack, done a bunch of googling. Cannot for the life of me figure out why on my clients site when you tap certain links on IOS devices (possibly android, don't have 1 to test) it triggers the hover state first then you have to tap again to trigger the a link. The weirdest part about this is that on my personal website I use hover effects and many similar code blocks, and the hover animation triggers AND the link triggers when I tap on mobile.

PASSWORD for the links below : viewthisthing

https://pfp-dev.myshopify.com/pages/physical-therapists - Bottom button

https://pfp-dev.myshopify.com/pages/contact - "contact us any time at.." the mailto link requires double tap

https://pfp-dev.myshopify.com/pages/stories - The bottom portrait grid has a opacity hover effect on desktop - mobile requires 2 taps AND MORE.

My website where you can see that the links work while simultaneously triggering the hover states: www.lancewalkerdesigns.com - the portfolio grid section is a great example. On desktop its a hover state to show the link, on mobile its shown by default. The link works perfectly.

Only thing I can figure is theres some javascript somewhere doing something weird. I am relatively new to web dev so I am not smart enough to figure this out

Seems to be a CSS issue

https://css-tricks.com/annoying-mobile-double-tap-link-issue/

On the contact page, try moving the mailto outside the animated paragraph.

This post was edited by Klexmoo on Sep 1 2020 03:52am

I figured out that wow.js was causing the issue, either that or animate.css

I'm using both of these on my personal website though so I'm confused as to why they caused a problem on this one. It must be a shopify javascript file conflicting with wow.js in some small way.

I simple moved the wow / animated classes to either the parent container or removed them completely and it solved the double tap issue. Very weird.