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

[arunbasillal]

Before submitting an issue please check that you’ve completed the following steps:

• Made sure you’re on the latest version 👍
• Used the search feature to ensure that the bug hasn’t been reported before 👍

Describe the bug
On Safari browser in iOS (and probably in others as per one customer), when delay JS is enabled links have to be clicked twice for them to work. This is even when:

• there aren't any keywords in the delay JS text area.
• link preloading is disabled.
• tested on latest version of iOS and Safari.

To Reproduce
Steps to reproduce the behavior:

• Enable delay JS
• In an iPhone or in BrowserStack use Safari to visit the page.
• Scroll down (important) and then try to click on a link. Only the second click will register and open the page.

Note that if you click on a link which is in the viewport, i.e. without scrolling, it will open immediately.

Expected behavior
Links should load as normal and shouldn't need two clicks.

Screenshots
Screencast: https://youtu.be/D1Pp45wLMhE (Thanks to @vmanthos for this and most of this report)

Additional context
Please see this note from Vasilis for some more insights - https://secure.helpscout.net/conversation/1283702266/195256/#thread-3691038967

Potentially related tickets:

• https://secure.helpscout.net/conversation/1287155173/196167/
• https://secure.helpscout.net/conversation/1283702266/195256/ (Same ticket linked above)
• https://secure.helpscout.net/conversation/1277735438/193444/
• https://secure.helpscout.net/conversation/1277423432/193297/

Backlog Grooming (for WP Media dev team use only)

• Reproduce the problem
• Identify the root cause
• Scope a solution
• Estimate the effort

[socialpreneur]

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

[engahmeds3ed]

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:

wp-rocket/assets/js/lazyload-scripts.js

Lines 91 to 99 in 7ec9d99

	const instance = new RocketLazyLoadScripts(
	[
	'keydown',
	'mouseover',
	'touchmove',
	'touchstart'
	],
	browser
	);

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.

[webtrainingwheels]

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

[vmanthos]

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

[vmanthos]

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

[girlie]

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

[NataliaDrause]

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.

[Roboonl]

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:

wp-rocket/assets/js/lazyload-scripts.js

Lines 91 to 99 in 7ec9d99

	const instance = new RocketLazyLoadScripts(
	[
	'keydown',
	'mouseover',
	'touchmove',
	'touchstart'
	],
	browser
	);

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).

[BradFD]

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.

[Roboonl]

Any updates on this?

[NataliaDrause]

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

[veganwebagency]

Same problem. Any updates?

[kashishkumawat]

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

[jorgemartine00]

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

[socialpreneur]

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

[Roboonl]

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).

[NataliaDrause]

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

[roberthedlund]

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

[veganwebagency]

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

[arunbasillal]

@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. 🙏

[roberthedlund]

@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 =)

[Tabrisrp]

@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.

[veganwebagency]

@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!

[froddo7]

I'm not sure, but this worked for me (so I think, correct me if I'm wrong). Was posted on a Facebook WP Rocket Group.

I am guessing you can play around with the delayed milliseconds?

Do post feedback if this is a solution, as I am a bit clueless if this works, or not. Good luck!

Go to WP Rocket Settings, and Exclude timingDelayExecution from JS Delay list.

Place in functions.php (of theme) the following code

[peixotorms]

I'm not sure, but this worked for me (so I think, correct me if I'm wrong). Was posted on a Facebook WP Rocket Group.

I am guessing you can play around with the delayed milliseconds?

Do post feedback if this is a solution, as I am a bit clueless if this works, or not. Good luck!

Go to WP Rocket Settings, and Exclude timingDelayExecution from JS Delay list.

Place in functions.php (of theme) the following code

This would obviously be the equivalent of disabling the delay js feature altogether.

[froddo7]

@peixotorms Actually that's where the timing delay number comes into play doesn't it? A previous version of this fake user interaction triggered without any delay. So that disabled the delay js feature. Here I am guessing you can delay this fake interaction? What do you think? Thanks!

[peixotorms]

You can check on pagespeed insights or gtmetrix.com for what scripts are loaded before and after this code.
The waiting time of 0.5 seconds will only delay the scripts for that time, hence they will all get loaded even without interaction, except that now the page is also 0.5 seconds slower that without js delay activated.

Also, it's possible for people to be rushing and be faster than 0.5 seconds, so it would not work.
The only real solution for the double click is to properly exclude the scripts that are required for the menu to open, from lazy loading.

[WordDom]

Hi, do you know how to put this code in the last version ?
/assets/js/lazyload-scripts.js doesn't exist anymore, only a minify file
const instance = new RocketLazyLoadScripts(
[
'keydown',
'mouseover',
'touchmove',
'touchstart'
],
browser
);

[moisty70]

Why you don't you say near delay check that enabling will broke your site on iphones?

[wessiack]

this issue is now open for so long.
I don't understand why wp-rocket doesn't fix it.
We are still on version 3.10.8 (where this issue does not exist!) and can't update....
I do not understand why wp-rocket had a working version thill 3.10.8 and can't fix that one from there?

[piotrbak]

@wessiack One of the root causes was solved in the 3.12.5 version of WP Rocket. Have you already sent your examples to our support team, so we could investigate this further? It'd be appreciated.

[wessiack]

Thanks for your response @piotrbak we are on the latest version 3.12.4. on integration. Is 3.12.5 already officially released? I don't see these in the plugin-update list...

[moisty70]

Same here, only 3.12.4 available. Hope that 3.12.5 solves this issue.

[piotrbak]

@wessiack @moisty70 3.12.5 is in the staggered release, you should see the update notification in upcoming days.

Hope that 3.12.5 solves this issue, but I'm not confident as is something that happens with many websites not only with wprocket.

We're fixing scenarios that are possible to be improved on our end. Here we're dependent on iOS browser implementations. For any regression cases (it used to work but it's not working in the newer version), the best solution is to contact our support team, we'll investigate each website separately finding the root cause.

[jojoba007]

Same issue here, WP 6.2, OxygenBuilder 4.5, MultiSite, Wp Rocket 3.12.6.1

[blw]

I don't see this fixed, I am on version 3.13.0.1

[mikezielonka]

Same! Still same issue as it has been for the past 3 years. Turning the JS delay has been the only solution.

…

On Wed Apr 19, 2023, 07:22 AM GMT, blw ***@***.***> wrote: I don't see this fixed, I am on version 3.13.0.1 — Reply to this email directly, view it on GitHub <#3142 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAL6GPTT7A3EHXF4J2ES533XB6HCRANCNFSM4RYKKVFQ>. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[blw]

Any update on when this will be fixed? This is really a great feature but it's sad we can't enable it as most users are on mobile safari.

[jojoba007]

Any update on the matter? Issue still persists

[uzelacgs]

I have same issue with Newspaper theme!

[sentenza13]

Same issue, it will be really great if this can be fixed

[wessiack]

same issue (Flatsome Theme, WPML and WP-Rocket Version 3.14.4.2) - committed by WP-Rocket 2nd level tech support!
Hope the WP-Rocket dev team will find a fix for that soon.

[lea-pw]

+1

[DOgunrinde3]

+1

[anandwebenix]

Hello, We are also facing this issue with our clients website. Please do the needful asap as this is critical.

[alexandrecorroy]

Hello, Any news about this problem ?

[zkingdesign]

This is freaking irresponsable, 3 years in and the issue still exists. Why can't it just be fixed? It's not like we're using a free plugin, we deserve better support, especially when sites break! If you can't fix it at least add a warning to the admin dashboard that states if you enable the javascript delay functionality the website may become unusable on safari.

[Cristiaprodan]

Greetings everyone! For those who are still seeking a solution, I've created a tutorial that might help. It's been effective for my website, which boasts a 99 score on PageSpeed, and I've encountered no issues with delayed JavaScripts.

This is the solution: https://prodanadvisor.com/double-click-issue-on-ios-safari-with-wp-rocket/

[peixotorms]

I had the same issue, so I moved on from wp rocket long time ago... but also to be fair, people are forgetting, that when you delay all javascript your are effectively turning it off and it's not downloaded, until there is interaction.

If the site was developed with a lot of plugins and is heavy with a lot of javascript, then obviously if you directly go and click the menu (how many people do that?) it first needs to download the scripts, and only then it will try to open the menu. Normal behaviour is to move the mouse, or tap somewhere else before going to the menu... so I think the issue shouldn't happen for those people, but if you are testing and directly clicking the menu, then the bug is going to happen.

Some scripts from different themes and plugins simply do not allow it to work due to how they are coded, or they have not being excluded because wp rocket doesn't recognize them.... I saw this coming when they switched from manually turning on the delay javascript option, to always on by default... so poor oversight.

They have to now exclude every possible script from all themes and plugins that have a menu, which also means, a lot of work and lower performance in the tests.

[peixotorms]

Greetings everyone! For those who are still seeking a solution, I've created a tutorial that might help. It's been effective for my website, which boasts a 99 score on PageSpeed, and I've encountered no issues with delayed JavaScripts.

This is the solution: https://prodanadvisor.com/double-click-issue-on-ios-safari-with-wp-rocket/

That is never going to be a solution... you are basically excluding Safari from the optimization, so while you score well on pagespeed (because it's not safari), all your safari users will not be optimized.

That also means, regardless of having 100 on pagespeed, you are still going to fail the web vitals metrics if you have a significant amount of users using safari. Web vitals are not from pagespeed, they are the average speeds experienced by all users.

[ollygaspar]

While I've stopped using WP-Rocket, I was still experiencing the double click issue on IOS.

I created a script that resolved this issue on my website. Here:

;(function(document, window) {
'use strict';

function isIOS() {
    return /iP(ad|hone|od)/.test(navigator.userAgent) && !window.MSStream;
}

if (!isIOS()) {
    return;
}

var touchStartX = 0, touchStartY = 0, touchStartTime = 0;
var firstTouch = true; // Flag to track the first touch

function onTouchStart(event) {
    if (!firstTouch) return; // Ignore if not the first touch

    var touch = event.touches[0];
    touchStartX = touch.pageX;
    touchStartY = touch.pageY;
    touchStartTime = event.timeStamp;
}

function onTouchEnd(event) {
    if (!firstTouch) return; // Ignore if not the first touch

    var touch = event.changedTouches[0];
    var moveX = Math.abs(touch.pageX - touchStartX);
    var moveY = Math.abs(touch.pageY - touchStartY);
    var duration = event.timeStamp - touchStartTime;

    if (moveX < 10 && moveY < 10 && duration < 200) {
        var targetElement = event.target;

        // Apply to links (including those within SVGs) and buttons
        if (targetElement.tagName.toLowerCase() === 'a' || 
            targetElement.tagName.toLowerCase() === 'button' ||
            targetElement.closest('a') ||
            targetElement.closest('button')) {

            var clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
            targetElement.dispatchEvent(clickEvent);
            event.preventDefault(); // Prevent the default touchend behavior
        }

        firstTouch = false; // Reset the flag after the first touch
    }
}

document.addEventListener('touchstart', onTouchStart, false);
document.addEventListener('touchend', onTouchEnd, false);

})(document, window);

[appelgran]

I had this double-tap issue caused by lightSlider due to its use of touchstart and touchmove that somehow triggered the bug in iOS. After thorough investigation I could resolve my issue with this piece of script (added to the beginning of body):

<script type="module">document.addEventListener("touchstart", function(){});</script>

It might as well work for your wp-rocket issues too.