d2jsp
d2jsp Forums > Off-Topic > Programmer's Haven > Web Languages > Help! Issue With Hover States And Ios Double Taps
Add Reply New Topic New Poll
Inertiatic
#1 Sep 1 2020 01:03am
Group: Member
Posts: 8,722
Joined: Oct 3 2006
Gold: 26,288.15
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
Klexmoo
#2 Sep 1 2020 03:51am
Group: Member
Posts: 11,418
Joined: May 17 2013
Gold: 105,298.75
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
Inertiatic
#3 Sep 1 2020 06:21pm
Group: Member
Posts: 8,722
Joined: Oct 3 2006
Gold: 26,288.15
Quote (Klexmoo @ Sep 1 2020 03:51am)
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.


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.
Go Back To Web Languages Topic List
Add Reply New Topic New Poll