Wp-rocket: Delay JS - Links needs to be clicked twice on iOS / Safari

I had a client reporting this with Flying Scripts plugin, too.

After searching I got that there is an issue on IOS with Safari related to using touchstart or touchmove without using touchend which make the links double click issue ( you need to click on any point from the screen as first click then u can click on any link )

the following link tries to highlight the issue:
https://stackoverflow.com/a/10340968

On customer site I made the following change and solved the issue:
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91-L99
replace touchmove with touchmove touchend
replace touchstart with touchstart touchend

After checking with @hellofromtonya , she said:-

This particular issue will need more investigation to find out why. Rather than adding a patch to the code for this specific edge case, why do they have the issue and why does this specific combination fix it?
I think the “why” here will be very valuable to ensure we don’t inject another problem for other customers.

so I will add needs: r&d label to be investigated.

Another case: https://secure.helpscout.net/conversation/1296370691/198532?folderId=377611
Customer reports it happening on chome and safari on mobile

Related ticket: https://secure.helpscout.net/conversation/1296809928/198688/

Related ticket: https://secure.helpscout.net/conversation/1322836283/206594?folderId=2135277

Related ticket: https://secure.helpscout.net/conversation/1334490646/210819/

Related ticket: https://secure.helpscout.net/conversation/1336672544/211528/
Notes and screen recording in the notes. The issue happens in both Safari and Chrome browsers.

After searching I got that there is an issue on IOS with Safari related to using touchstart or touchmove without using touchend which make the links double click issue ( you need to click on any point from the screen as first click then u can click on any link )

the following link tries to highlight the issue:
https://stackoverflow.com/a/10340968

On customer site I made the following change and solved the issue:
https://github.com/wp-media/wp-rocket/blob/7ec9d996f004707a57c4c8476090d5bd943051f0/assets/js/lazyload-scripts.js#L91-L99

replace touchmove with touchmove touchend
replace touchstart with touchstart touchend
After checking with @hellofromtonya , she said:-

This particular issue will need more investigation to find out why. Rather than adding a patch to the code for this specific edge case, why do they have the issue and why does this specific combination fix it?
I think the “why” here will be very valuable to ensure we don’t inject another problem for other customers.

so I will add needs: r&d label to be investigated.

I tried this suggestion but it unfortunately didn't resolve the issue on iOS (for me at least).

Same problem. Tried this feature for the first time a few days ago and got immediate reports that links on iOS weren't working and they needed double tap to work. Tried on 2 x iOS 14 devices and confirmed this problem so disabled for now.

Any updates on this?

Related: https://secure.helpscout.net/conversation/1367506767/223234

Same problem. Any updates?

Experiencing the same bug with both WP-Rocket and Flying Scripts. Replacing touchstart and touchmove didn't help.

Related: https://secure.helpscout.net/conversation/1376564315/226026/

I have this happening on iOS Chrome browser rather than Safari. Anyone else can confirm?

We've dropped the WP Rocket plugin for now, this issue is already open for 3 months and I don't feel like it's going to be fixed any time soon with the current open issue count (+400).

Related: https://secure.helpscout.net/conversation/1379195337/226677

Hope WP-rocket add the "fix" soon :)

Any update from the developers? Are you working on it?

@wp-media/dev Since we are seeing more and more of this and since the bug makes the feature quite unusable, I think we need to prioritise it. I have added it to the next sprint to see if we can figure out a solution. 🙏

@wp-media/dev Since we are seeing more and more of this and since the bug makes the feature quite unusable, I think we need to prioritise it. I have added it to the next sprint to see if we can figure out a solution. 🙏

Sounds good. This feature make a big difference for my website when it comes to speed, would love to have it activated again =)

@arunbasillal no, the issue is marked as need R&D, it can't be part of a sprint. For an issue to be part of a sprint, it needs to be fully groomed first.

@wp-media/dev Since we are seeing more and more of this and since the bug makes the feature quite unusable, I think we need to prioritise it. I have added it to the next sprint to see if we can figure out a solution. 🙏

Thanks! I really love this feature - would be awesome if it can be used on all my websites!

@wp-media/productrocket Some feedbacks from the team about this:

• This is tricky because of the way iOS works.
• The thing is touchscreens don’t really have a good hover alternative, other than maybe touch-and-hold — but at least on iOS devices, that has its own significance (it loads a preview frame of the link destination).
• Ahmed deeply dived into this also before, the only solution is to use timeout like flying scripts

As there is no fix for that without significant changes to the current way this feature works, it needs further thinking before going further.

Need and mouseWheel event and setTimeOut. On mouseweel scripts like Infinite Scroll and others scripts, works not correct, not loading next page if only mousewhell. In general, this applies to all scripts, and it critical.
Delay JS without setTimeOut also cause problems, in addition to links needs to be clicked twice. Exemple: In the Russian segment, Yandex search engine. The counter can use a webviewer, this is a record of user actions. Accordingly, the script should not be delayed: since when viewing user actions, the counter script on the site should be loaded. And it naturally does not load because no actions, no 'keydown', 'mouseover', 'touchmove', 'touchstart' occur in the viewer.

I'd really like to know how WP Rocket team is considering this, but at least auto load scripts after x seconds option is a must until iOS fixes the issue.

@wp-media/productrocket Some feedbacks from the team about this:

• This is tricky because of the way iOS works.
• The thing is touchscreens don’t really have a good hover alternative, other than maybe touch-and-hold — but at least on iOS devices, that has its own significance (it loads a preview frame of the link destination).
• Ahmed deeply dived into this also before, the only solution is to use timeout like flying scripts

As there is no fix for that without significant changes to the current way this feature works, it needs further thinking before going further.

Any timeline for the implementation for the timeout solution?

Loading scripts after X seconds isn't the solution. Doing that is just in the opposite of the interest of this feature. If we can find a solution without doing that, we will try to go on this way.

@arunbasillal @engahmeds3ed Could you redo some tests?

I'm asking as we had the same problem with our website too. But since last week, we don't have the problem anymore. Is it the coincidence of releasing our new website, or an iOS update?

Any timeline for the implementation for the timeout solution?

We can't provide any ETA.

@GeekPress When I view your site with Chrome using mobile window size provided by Dev tool (Is there any official name for this feature? Perhaps mobile preview?), two finger scrolling never triggers delayed scripts including analytics. And for the double click problems on this thread, which page and link did you test? The top page?

@GeekPress When I view your site with Chrome using mobile window size provided by Dev tool (Is there any official name for this feature? Perhaps mobile preview?), two finger scrolling never triggers delayed scripts including analytics. And for the double click problems on this thread, which page and link did you test? The top page?

I don't think testing with the Mobile Preview in the Chrome Developer Tool gives the same result as actually testing on an iOS device due to the difference in touch gestures.

@Roboonl You are right, they should be different. And I'm not doing so. I simply wonder if it is OK for WP Rocket that scripts are never loaded under certain condition(s).

The setTimeOut is needed, or rather necessary.

related: https://secure.helpscout.net/conversation/1406743456/234374/

Related case: https://secure.helpscout.net/conversation/1405169718/233859/

Browser: Safari and chrome
Device: iPhone 11 Pro

Adding timeout trigger would also resolve https://github.com/wp-media/wp-rocket/issues/3420

Adding timeout trigger would also resolve #3420

@piotrbak Not sure #3420 is related to this problem. Fixing #3454 should I think fix #3420

@GeekPress From my understanding, the users were scrolling around on the webpage and the Delay JS wasn't triggered. The Google Analytics script was not loaded then.

Seems that you're right about the https://github.com/wp-media/wp-rocket/issues/3454 it's also related to mobiles. Probably any of those issues would resolve the https://github.com/wp-media/wp-rocket/issues/3420
Thanks

Any update?

@arunbasillal Cant you add an option in WP-rocket for this to exclude on certain pages instead in the meanwhile?
Like Flying Scripts has, they even have option to exclude the Delay JS for certain pages with keywords.

another case:
https://secure.helpscout.net/conversation/1417928403/237257?folderId=2683093

I don't think testing with the Mobile Preview in the Chrome Developer Tool gives the same result as actually testing on an iOS device due to the difference in touch gestures.

@Roboonl It has been tested on a real mobile device. Please try our website on mobile, you don't need to click two times.

@roberthedlund I should have missed something, I don't find any way with Flying Script to have keywords based on pages.

I don't think testing with the Mobile Preview in the Chrome Developer Tool gives the same result as actually testing on an iOS device due to the difference in touch gestures.

@Roboonl It has been tested on a real mobile device. Please try our website on mobile, you don't need to click two times.

@roberthedlund I should have missed something, I don't find any way with Flying Script to have keywords based on pages.

https://ibb.co/qYVyhh6

@roberthedlund Well, you can already do that with WP Rocket too. You have just to go on your page edit screen, open the « WP Rocket Options » metabox, and turn off the Delay JS Execution option.

@roberthedlund Well, you can already do that with WP Rocket too. You have just to go on your page edit screen, open the « WP Rocket Options » metabox, and turn off the Delay JS Execution option.

Yeah but not ideal to do that manually on 100+ pages for an example.

Any update?

This issue is still available with version 3.8.6 with Chrome on Android. I just tried Fying Scripts, then this double click bug didn't happen. For iOS, even with Flying Scripts, viewers are required to double click.

Any update? I find it strange that you have still not informed the users of WP-rocket in any way about the problem. How difficult is it to enter a warning notice before people activate the Delay JS feature? Have seen so many users in various forums who do not yet know that they are suffering from the problem before I have contacted them about it. It's a pretty big problem and I think you should warn about it.

@socialpreneur For iOS, are you trying on a real mobile, and not with a simulation?

Why I'm asking the question?

I retry again myself on my personal iPhone 8 and I don't have to click twice on all websites I tried which had Delay JS including our own website.

@GeekPress On real mobile, including me and my client's phone, so I had to disable Delay JS completely. Flying Scripts didn't also work, so I'm guessing this is iOS limitation right now.

Added: It looks like there's some external or internal script which is causing this problem. Not every site which uses Delay JS of WP Rocket nor Flying Scripts have this double click symptoms. So far two sites that do not have this problem do not use adsense. I think we'll need to gather more cases to figure out which is the cause.

@GeekPress

@socialpreneur For iOS, are you trying on a real mobile, and not with a simulation?

Why I'm asking the question?

I retry again myself on my personal iPhone 8 and I don't have to click twice on all websites I tried which had Delay JS including our own website.

I had tried on plenty of websites that using Delay JS, and have tried on real phones. iPhone 8, iPhone SE, iPhone 11 and all of them had this problem. Sometimes it workes on first "click" then the others totally stop working. So the issue is real.

@socialpreneur Have you tried on our website (https://wp-rocket.me)? As I said, I'm not able to reproduce the issue after trying on a couple of websites.

May I know the iOS version you are using?

@GeekPress Not everything you see is the truth. If at least one WP Rocket user is having the issue, then we need to do everything and anything to solve the matter. My iOS is 14.4, and I'll ask my client for his iOS version. As I said, since this is happening on every Delay JS plugins out there (WP Rocket, Flying Scripts, Perfmatters) on certain site with certain scripts, this is not only your cause.

It may be browser, but when I see this double click problem, it's not only iOS, but I have it on my Android and its Chrome so it's clearly not only the iOS nor Safari problem. I just hope we can come up with some little hack or additional functions.php to bypass this trouble on certain sites.

I'll let you know if I find anything.

Added 1: OK, here's third site which is having the problem. Maybe I can narrow down some common scripts.

Added 2: So far just enabling Delay JS won't trigger this problem.

But when I set some scripts, double click/tap starts happening.

Added 3: Alright, here's what I found. When I add "table-of-contents" double click thing gets triggered. It may not be the same for all other users who are reporting this, but so far this is one of the keywords. Table of Contents Plus is the plugin name.

Added 4: Here's good news. Another site having the same problem is also using TOC Plus. @GeekPress, please test it with this plugin enabled. And tell all your support staffs to confirm if the users having the same problem is also using this plugin on their sites. ASAP.

Added 5: I have managed to solve this problem for one of the sites by not delaying TOC Plus script. But the same solution didn't work for another site, so there seems some more scripts that are not delay friendly.

Added 6: I have a feeling jquery version may be taking some part of this problem. One working site uses the latest, and the other not working site uses old version (/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp). Debugging further more...

@GeekPress Aside from TOC Plus, I also found that adsense is the cause of double click/tap. I have tested with a few sites, and all sites with different themes/plugins have the same. This happens with any adsense keywords below.

• googlesyndication
• adsbygoogle
• adsbygoogle.js

To reproduce

1. Build a test site with adsense anywhere, within above the fold or not.
2. Refresh the page, tap on header logo/text or mobile menu icon. At this point adsense gets loaded, but it won't open the menu with one tap.

Solution

I'm not sure as this seems how adsense script is designed. Considerable work around are:

1. Load adsense always after 1 sec. so most users won't face this problem.
2. Preload adsense on mouse hover (not sure if this would work on mobile tap)
3. Tell users not to monetize with adsense, so sites gets much faster...

@GeekPress my website is celmetro.com and I have the same double click problem when I enable Delay Javascript Execution, does not matter if there are no scripts to delay in the list.

Related: https://secure.helpscout.net/conversation/1458853194/249184?folderId=3864740
They use TOC Plus and adsense.
Edited: this is additional info from @socialpreneur with screen recording on the affected site.

I can confirm the issue on my website via Chrome mobile (as well as via Chrome Desktop setting the web dev tool to load as mobile)