2

I'm running a Wordpress site and have run into an issue where I need to click a link twice on mobile in order for the link to actually work. I'm thinking this might be due to :hover within my CSS however even after removing it, I still need to click the link twice on mobile.

This is happening on all of my product titles, images, and CTA buttons on the homepage. 

.product_item img:hover
.product_item p a:hover
.check_it_out:hover

Can anyone help me identify how to solve this?

The website in question is this one https://ecoshopr.com/

worldofjr
  • 3,868
  • 8
  • 37
  • 49
synchroni_city
  • 139
  • 1
  • 10
  • Please look at this questions : http://stackoverflow.com/questions/8291517/disable-hover-effects-on-mobile-browsers – Ianis Dec 31 '15 at 01:41

2 Answers2

3

I assume you are seeing this on iOS only, which has such known issues. The culprit of this type of problems with iOS Safari has been 1st explained by Nicolas Zakas' with: iOS has a :hover problem

To resume: iOS has a platform specific behavior with CSS :hover rules that was designed to adapt legacy Desktop :hover(s) and try to make them work on touch devices without changes. While that solution was ok, and made such web sites work as intended. It can also create conflicts.

As noted on the blog post, what triggers this behavior is more or less:

"a :hover Rule that either hides or shows another element using visibility or display".

In your use case, for links, it appears that what triggers this behavior is a change of link color on :hover with an !important CSS declaration on top of a global a { transition: all; } rule...

By curiosity, I debugged your :hover rules on an iOS simulator. And removing !important seems to be enough to solve it. The same or similar is what need to be changed for other links.

enter image description here

For the images, the opacity transition is the :hover action preventing 1st click(s) from firing.

To solve that one, adding a not(:focus) on :hover+transition rules should do.

enter image description here

hexalys
  • 5,177
  • 3
  • 31
  • 56
  • Thanks for the reply. For some reason it still doesn't seem to be working on my IOS device. I removed the !important from the .product-title-hp a:hover class and it seems that I still need to click twice in order for the link to open. – synchroni_city Jan 12 '16 at 00:12
  • OK. Your global `a { transition: all; }` probably makes it difficult here. Because it triggers all kind of transitions... If that's the case, you'll need to remove the `color` change on `:hover` completely and/or perhaps the `border: bottom` (which is very odd to have on hover anyway) as well. Or, similarly to images, add a `:not(:focus)` to the `.product-title-hp a:hover` declaration. – hexalys Jan 12 '16 at 00:24
0

Turns out my theme was using some JS that was causing the issue. Once I removed this from my init.js file:

/* button show */
        $/*('.product_item').mouseenter(function(){
                $(this).find('.product_button').fadeIn(100, function() {
                        // Animation complete.
                });
    }).mouseleave(function(){
                $(this).find('.product_button').fadeOut(100, function() {
                        // Animation complete.
                });
    });*/

The issue was resolved.

synchroni_city
  • 139
  • 1
  • 10
  • That makes sense. That code does exactly what should not be done as I indicated. i.e. It fully qualifies as: " a :hover Rule that either hides or shows another element using visibility or display" – hexalys Jan 12 '16 at 22:17