[Support request] Have to double click for links to work on homepage

[Paul]

On my iPad 6th Gen (IOS 14.4.1), using Safari, when clicking on any links on my homepage, I have to click them twice for them to load. This does not happen via the Chrome App. Not sure how long this has been happening since I am just now testing Safari with the Generatepress Premium Theme. Please see the following video of the issue also…
https://1drv.ms/u/s!AtzxGqXDzsbBioRz6uzMoWLS30uhLQ?e=iVGywl

My website is https://www.dailycdev.com/
I am using GeneratePress v3.0.3 and GP Premium v2.0.2.
This is a big issue since a lot of my users use Safari on iPads and iPhones.
I have even disabled every plugin minus generate press and the issue persists, so I know it has to do with the theme.
Please let me know there is a fix I can do on my end for this or that there is a patch coming out for this very soon.
I do not wish to switch to a new theme just because generate press isn’t fully supported with Safari.
Thanks.

-Paul Gee

[David]

Hi there,

i tested the site and the navigation links, plain text links and even the slider works for me on first tap.

The Important Pages to Visit and Most Recent Writings ‘links’ however do require two taps.
This looks to be related to the Custom CSS being used to apply hover effects to elements within the <a> eg.

.pagebuttons img:hover {
    border: none;
    filter: brightness(90%);
}

and:

.messagesmain > div > div > a > span:hover {
    border-color: red;
}

If i disable that CSS in the browser developers tools then they work on first tap.

You can exclude those hover effects from touch devices in your CSS by wrapping them in @media query that tests for input type:

@media (pointer: fine) { 
    /* Add CSS here to apply only to devices with fine input control eg. mouse */
}

Give that a try.

As a rule of thumb when adding hover effects you should apply them to the link and not the element within a link.
eg,

.messagesmain > div > div > a:hover > span {
    border-color: red;
}

This should also negate touch devices from listening to the nested elements hover effect before the link.

[Paul]

What you mentioned did not help.
Let me clarify that the homepage links works on a single click using Chrome on iPADOS on my iPad 6th Gen.
However, it takes two clicks for any links including the site header link using Safari.
I know this is an issue with generatepress since disabling every plugin and removing all CSS doesn’t fix the issue either.
I even removed the CSS you mentioned and put it in the following as a test and it doesn’t work either…

@media (pointer: fine) {
.pagebuttons img:hover {
border: none;
filter: brightness(90%);
}
.messagesmain>div>div>a>span:hover {
border-color: red;
}
}

Anyhow, if you can look into why Generatepress does not allow links to work on a single click using Safari on a iPad, that would be great. Thanks.

[Paul]

We can close this case. I’ve verified it is a jetpack plugin issue. Here are the details…

“I have to double click for links on the homepage when on an iPad or iPhone while using Safari. This only happens in Safari on my iPad with iPadOS 14.4.1, not on Chrome on the iPad or desktop browser apps. I am reporting this since I have identified the issue with the Jetpack v9.9 plugin. To verify this, I’ve deactivated all plugins on my staging site for https://www.dailycdev.com, and in my testing simply enabling Jetpack the issue comes back. But when I disable it the issue goes away and just like on the desktop for PCs like Chrome, the links work with a single click.”
https://wordpress.org/support/topic/ipad-have-to-double-click-for-links-to-work-on-homepage-on-safari/#new-topic-0

[David]

Well that is peculiar!
Glad to hear you found the culprit.

[Paul]

This is not a jetpack issue after all.
It relates to Generatepress.
Here is why….
Jetpack support said if I switch to a different theme like twenty 2021 and it doesn’t have the same issue with Safari, then it is an issue with my current theme (Generatepress). So I did as they said and switched to that other theme and all the links on the homepage work in Safari. However, switching back to Generatepress, the issue returns. However, if I disabled jetpack with generatepress the issue goes away also. So it seems that Generatepress is not fully compatible with the jetpack 9.9 version.

[David]

When you tested switching Themes was the SG Optimizer ( and any other optimization plugins ) disabled ?
And have you tested the GP site without it?

As to debug the issue we need to eliminate anything that potentially interferes with scripts running on the site.

The next step would be to identify what Jetpack option is ‘bugging out’.

As a note: if GP was ‘incompatible’ with Jetpack i am sure we would have heard of this before, as we have many user running it. And this is the first it has come up. The only other double tap issue we have seen is in regards to custom CSS hover effects on the menu – not Jet Pack or GP related.

[K]

Hey,

There is a known bug on iOS that sometimes occurs when using the Delay JS. This bug causes links to not work until they are clicked twice.

You can check a workaround here => https://perfmatters.io/docs/delay-javascript/#ios-double-click

[Author]

Posts