search

wp-media / wp-rocket

Performance optimization plugin for WordPress
https://wp-rocket.me
GNU General Public License v2.0
700 stars 218 forks source link

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

Open arunbasillal opened 4 years ago

arunbasillal commented 4 years ago

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

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:

To Reproduce Steps to reproduce the behavior:

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:

Backlog Grooming (for WP Media dev team use only)

GeekPress commented 3 years ago

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

socialpreneur commented 3 years ago

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

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

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

socialpreneur commented 3 years ago

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

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...
paskalr1 commented 3 years ago

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

NataliaDrause commented 3 years ago

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.

NicoCaldo commented 3 years ago

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)

mikobig commented 3 years ago

Same problem. Need to click twice on links. Happens on iOS devices with Safari, Chrome, Mozilla and Edge browsers. I have tested a lot and found a handful of scripts which do not trigger the problem when delayed.

socialpreneur commented 3 years ago

platform.twitter.com/widgets.js seems to be triggering double tap on Chrome with iOS. But there're sites that work fine, so I'm thinking depending on some themes, delaying js triggers double tap.

socialpreneur commented 3 years ago

Anybody know if iOS is planning to solve this issue? WP Rocket, Flying Scripts, Perfmatter's Delay JS, and all of these are having this issue.

NickNoordijk commented 3 years ago

Hey, found this through Google but I don't use wp-media or wp-rocket. The issue for me happens when I load the JS scripts of my advertiser after the first scroll. I need to tap the link twice to navigate. One tap anywhere on the screen followed by the link tap works too. When I load them at init the links can be tapped normally just once. Just wanted to let you all know it's not only these scripts. The scripts have a small issue but it seems iOS is the big issue here?

UPDATE: I was able to fix it with @engahmeds3ed proposal! I added touchend to all my touchstart events and it fixed the bug! I've been looking for this for over a week!

socialpreneur commented 3 years ago

@NickNoordijk Did you use custom functions, or did you manually fix the plugin file directly?

socialpreneur commented 3 years ago

This (https://github.com/wp-media/wp-rocket/issues/3142#issuecomment-699957659) solution fixed a few sites, but not a complete solution unfortunately. But it's much better than WP Rocket's current code. Client sites are always different, and it's hard to figure out the exact cause of problem...

roam92 commented 3 years ago

> This fixed a few sites, but not a complete solution unfortunately.

Why do you say that? Can you give more details? Thanks!

socialpreneur commented 3 years ago

@roam92 It's hard to give the details as I have not figure this out the exact reason why it didn't work on certain sites. If I knew, I would have included some files that may be still conflicting with the fix. Due to NDA, I can't even put links to client sites here.

roam92 commented 3 years ago

@socialpreneur – So to be clear, you made the change (locally) to the WP Rocket code proposed by @engahmeds3ed above, and what you found is that it fixed the mobile double-tap problem for some of the sites you tried it on, but not on all the sites?

For the sites you tested where the double-tap problem was resolved, was there any impact from the code change on the Delay JS functionality in WP Rocket, or did all that still work properly with the change?

From what I can tell, it seems to be an issue that selectively arises depending on the other JavaScript running on a site... I hope the WP Rocket team can take the time to isolate the circumstances when it arises and/or implement some sort of fix or workaround, because this can be a dealbreaker on iOS/iPadOS.

paskalr1 commented 3 years ago

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 and it works with my site

roam92 commented 3 years ago

> I tried this and it works with my site

I tried it too, and it worked on my site as well...

It fixed the issue with double tap on iOS/iPadOS, and no Delay JS functionality was lost on any platform.

Not sure why this change hasn't already been made for everyone.

alfonso100 commented 3 years ago

Another case: https://secure.helpscout.net/conversation/1499646121/260487?folderId=4130695

JohnTorvik commented 3 years ago

Related: https://secure.helpscout.net/conversation/1502403411/261233/

DahmaniAdame commented 3 years ago

Related ticket - https://secure.helpscout.net/conversation/1505662587/262130/

socialpreneur commented 3 years ago

From what I can tell, it seems to be an issue that selectively arises depending on the other JavaScript running on a site...

I also think things there're some scripts that might work differently, even if WP Rocket adds this fix. It's just impossible to make this feature 100% working on any site.

socialpreneur commented 3 years ago

3.9 is released. I checked the updated file, but WP Rocket didn't include touchend fix for iOS. It would be great if someone form WP Rocket team explains why they skipped fixing this ongoing problem while some users reporting it fixes the issue.

GeekPress commented 3 years ago

@socialpreneur It hasn't been changed yet, it will be during the staggered process. Thanks for your comprehension and your patience.

Mai-Saad commented 3 years ago

Note for retest fix on browserstack: Couldn't reproduce using iPhone 12mini and iPhone 8 on Safari but was there on iPhone 11 and iPad Pro 12.9 on Safari (3.9)

remyperona commented 3 years ago

There will be an updated to this issue in 3.9.0.1, by adding additional touch events to the triggers for delay JS.

In our tests, it didn't prevent the double tap needed all the time, but there could be some improvements seen by our users.

We're keeping the issue open to keep track of the evolution.

paskalr1 commented 3 years ago

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 and it works with my site

Google Analytics is not able to register mobile visitors if i implement the change. gtag/js in the delay scripts is causing the problem when the above mod is implemented. If i remove gtag/js from the list then the lighthouse score drops to the same level when the delay script is disabled. I have removed the mod until we find a new solution for this.

pythoncreate commented 3 years ago

Any updates here? I tried to edit the aforementioned code, but mine seemingly looks different

paskalr1 commented 3 years ago

installed the new version 3.9.0.2 and the pages were not rendering. I use wp bakery with the theme and has to exclude below scripts

jquery.min.js js_composer_front.min.js

still double tap issue remains

website: https://www.celmetro.com/

DahmaniAdame commented 3 years ago

Issue still there on iPhone 12 Pro - iOS 14.5 Ticket - https://secure.helpscout.net/conversation/1543769478/271789/ @Mai-Saad would it be possible to test this one?

Mai-Saad commented 3 years ago

@DahmaniAdame There was an enhancement done on code but it isn't fixed 100% .. still can see it on some links on some sites. as mentioned here https://github.com/wp-media/wp-rocket/issues/3142#issuecomment-853129070

GoldenGoldy commented 3 years ago

I also had the double click/tap issue on IOS / Safari, on WP Rocket version 3.9.0.4 Managed to solve it with the info in this topic:D I added the exclusion for twitter as suggested in a previous comment by @socialpreneur In my case I also added an exclusion for Facebook, as the issue was still present. After adding the Facebook exclusion the issue is gone! I also had the issue described here https://github.com/wp-media/wp-rocket/issues/3075 with Google Recaptcha so added an exclusion for that as well. And I also removed 2 of the default exclusions: (?:wp-content|wp-includes)(.*) /jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js , so far that works fine as well, no double click/tap issue. Especially the first rule above excludes so many scripts that it's probably better to try and remove it and figure out which of the "internal" scripts should be excluded on an individual basis rather than using this catch-all rule.

My current exclusion list below for reference: js-(before|after) google.com/recaptcha/api.js platform.twitter.com/widgets.js connect.facebook.net/en_US/sdk.js

roberthedlund commented 3 years ago

I also had the double click/tap issue on IOS / Safari, on WP Rocket version 3.9.0.4 Managed to solve it with the info in this topic:D I added the exclusion for twitter as suggested in a previous comment by @socialpreneur In my case I also added an exclusion for Facebook, as the issue was still present. After adding the Facebook exclusion the issue is gone! I also had the issue described here #3075 with Google Recaptcha so added an exclusion for that as well. And I also removed 2 of the default exclusions: (?:wp-content|wp-includes)(.*) /jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js , so far that works fine as well, no double click/tap issue. Especially the first rule above excludes so many scripts that it's probably better to try and remove it and figure out which of the "internal" scripts should be excluded on an individual basis rather than using this catch-all rule.

My current exclusion list below for reference: js-(before|after) google.com/recaptcha/api.js platform.twitter.com/widgets.js connect.facebook.net/en_US/sdk.js

Thank you @GoldenGoldy this also worked for my site!!!! Awesome :)

Alex43515 commented 3 years ago

Related ticket - https://secure.helpscout.net/conversation/1570565881/279394?folderId=4831552

DahmaniAdame commented 3 years ago

Potential fix using the FastClick library.

Add the following to the header: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js" integrity="sha512-qH+R6YL4/40iiIrnN5aNZ1sEeEalNAdnzP9jfsxFPBdIslTkwUddkSazjVWhJ3f/3Y26QF6aql0xeneuVw0h/Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}
</script>

Exclude the following from Delay JavaScript Execution: 

fastclick

And test if the issue is fixed.

The fix worked on the following case: https://secure.helpscout.net/conversation/1567743453/278526

Requires further testing to confirm.

@Mai-Saad if you have a persistent double-tap on a testing environment, would you mind testing the above fix?

mifrero commented 3 years ago

Related ticket: https://secure.helpscout.net/conversation/1575244886/280804/ The fix provided by @DahmaniAdame worked on this case, but the website header disappears.

Update: The fix provided by @DahmaniAdame works fine, adding the script to the that way solved the problem with the header, however this fix negatively impacts the load time, more info in the above ticket.

@Mai-Saad If you are checking this out, this case might be useful

viobru commented 3 years ago

Related ticket: https://secure.helpscout.net/conversation/1586259868/283864?folderId=3051575

juricazuanovic commented 3 years ago

Related ticket: https://secure.helpscout.net/conversation/1578504399/281872/

camilamadronero-zz commented 3 years ago

Related https://secure.helpscout.net/conversation/1613606249/290464/

piotrbak commented 3 years ago

Hello! We're still looking closely at this issue, of course. It's possible that in some cases the issue is not related to the Delay JS itself, but the CSS code:

iOS will not trigger a link click event on the first tap if the :hover state either:

Has a CSS transition animation
Reveals child content (such as a submenu, tooltip or ::before/::after element)

If you can confirm that the problem is not happening when Delay JS is enabled (or WP Rocket's optimizations bypassed), please post the URL of your site or send it to me piotr [at] wp-media.me.

blogtutor commented 3 years ago

Hi @piotrbak - I'm unclear if you're looking for a site that has the issue, or doesn't have the issue? But in case it's helpful, here's a client site that has it: https://cubesnjuliennes.com.

We currently have both Delay JS & Defer JS Enabled (with a few exclusions for her ConvertPro, her opt-in tool). I'm able to reproduce the "must tap twice" issue on the homepage on my iPhone...both cached/optimized and with ?nowprocket appended to the URL.

Steps to reproduce:

  1. Go to https://cubesnjuliennes.com or https://cubesnjuliennes.com?nowprocket on iPhone X Safari, iOS 14.7.1.
  2. Scroll down to the "Latest Recipes" thumbnail images.
  3. Tap on one. It will highlight and stay highlighted.
  4. Tap on it again and it will load the link.

I'm able to then click the logo on her site to go back to the homepage and repeat the process. However, another one of my team members (also on iPhone X with iOS 14.7.1) only sees the issue on the first page load...

Hope that helps?

bemyhre commented 3 years ago

I also had this issue until I turned off delay js at https://ramshacklepantry.com

It was very similar steps to reproduce that @blogtutor pointed out, but at my site AND ?nowprocket worked fine for me.

Also one thing to note... I was getting this on individual recipe pages with the "jump to recipe" button, but only after I turned on my ad company's feature to insert an ad at the top of the recipe card. That feature hijacks both the button click and scroll (you can see it on my site right now).

When I turned it off, the Jump to Recipe button was fine. Without that feature on, the button is just an anchor tag element. With that feature on.. all sorts of js comes into play.

I turned off delay js (which is not ideal) or ?nowprocket and it works no matter where.

piotrbak commented 3 years ago

Hello @blogtutor and @bemyhre Thank you for your feedbacks, they're very appreciated! At this moment there are a couple of possible culprits of this behaviour. Please find the troubleshooting steps below:

  1. Double click is happening with and without Delay JS - it means that the problem is most likely related to the CSS and this issue.
  2. If the problem is happening only with Delay JS enabled, then it's possible that one of the loaded scripts is involved. To check this, please exclude all inline and external scripts from Delay JS (to confirm this, please go to the source of the page and search for the type="rocketlazyloadscript", there shouldn't be any occurrence of this string)
  3. If the above won't help, we'd love to investigate the problem because it'll be pointing to our script itself. In this case, please send me message to my mailbox provided in the previous comment. Thank you once again!
mifrero commented 3 years ago

Related ticket: https://secure.helpscout.net/conversation/1645076349/297810?folderId=2952229

camilamadronero-zz commented 3 years ago

Related https://secure.helpscout.net/conversation/1651016587/299237/

alfonso100 commented 3 years ago

Related: https://secure.helpscout.net/conversation/1624889905/293173

camilamadronero-zz commented 2 years ago

New ticket https://secure.helpscout.net/conversation/1687816685/306024?folderId=5321805

girlie commented 2 years ago

New ticket: https://secure.helpscout.net/conversation/1692844093/307019/

WordPresseur commented 2 years ago

New ticket: https://secure.helpscout.net/conversation/1691278202/306676/

Update: the solution provide here https://github.com/wp-media/wp-rocket/issues/3142#issuecomment-882012665 worked.

peixotorms commented 2 years ago

Can't we just detect safari on load, check if the delay option is on and issue a click somewhere, so that the user will always have 1 click done right after page load?

WordPresseur commented 2 years ago

New ticket: https://secure.helpscout.net/conversation/1696313190/307777/