Double tap required on mobile text link

My client is not ready to make this site public yet, so I'm sorry I can't provide a link. 

On mobile, a text link (going to the contact page) works fine on the computer; however, on both my iPhone 14 Pro Max and my client's iPhone 8 (!!), the link requires a double tap to go to the destination the first time the site is opened. 

Then, the browser... or something... seems to "learn" the destination, and it's fine. Happened on both Safari and Duck mobile browsers. 

Support was not able to replicate this issue; I'm at a loss. No problem with requiring a double tap on footer links. Sooooo, as recommended, I am working through "Troubleshooting browser issues," but what are the chances of this happening on both phones?

Re-created the link several times, the same issue. I know I can make a button and be done with it, but this is exceedingly strange—never encountered in my six-year building history. 

The footer links work fine! Support says that this is a phone/browser issue and outside their scope. 

Edited to add: This also happens with the button on mobile! Requires two taps.

On 2nd support try, Squarespace was able to replicate the issue, and escalated it to engineering & design. 

Have you found a solution to fix yet?

Greetings and thanks... not yet! 

Support said it's an occasional issue and they're working on it. In the meantime, heading links work fine first tap on mobile; it's just text links and buttons that require two taps when first opening the site. 

16 hours ago, CarolStatella said:

Greetings and thanks... not yet! 

Support said it's an occasional issue and they're working on it. In the meantime, heading links work fine first tap on mobile; it's just text links and buttons that require two taps when first opening the site. 

You can share site url? I think we can try some CSS code to fix it

Thank you so much! Sorry, have been recovering :) 

Messaged you. It continues to be an issue, and am building yet another site that has this same problem.

Continuing to search the forum with little success. 

Hi, I have the same issue. It isn't acceptable for client sites.

How can turning off something that gives the website some movement be an adequate solution. I can't understand how this isn't an immediate priority. It's like a lot of people complain about it but they won't acknowledge how bad an issue it is or if it even exists.

I know they've said they've sent to dev but it's still happening. I'd say a lot of sites would lose traffic because users would just get annoyed. 

Some links like top nav never seem to do it, but then other places around the site don't work on first click on mobile. I'm using iphone 12 promax with latest OS and chrome browser.

Did you manage to work out any code to fix it? That would be a life saver because I've got angry clients....like platform deal breaker issue.

On 4/6/2024 at 8:12 AM, mike.bj said:

Hi, I have the same issue. It isn't acceptable for client sites.

How can turning off something that gives the website some movement be an adequate solution. I can't understand how this isn't an immediate priority. It's like a lot of people complain about it but they won't acknowledge how bad an issue it is or if it even exists.

I know they've said they've sent to dev but it's still happening. I'd say a lot of sites would lose traffic because users would just get annoyed. 

Some links like top nav never seem to do it, but then other places around the site don't work on first click on mobile. I'm using iphone 12 promax with latest OS and chrome browser.

Did you manage to work out any code to fix it? That would be a life saver because I've got angry clients....like platform deal breaker issue.

You try this

https://forum.squarespace.com/topic/259523-mobile-buttons-and-links-require-2-taps-to-work/?do=findComment&comment=737991

Hi @mike.bj & @CarolStatella, I encountered this issue a while back and wasn't willing to lose sitewide animations to fix it. I found that adding the following media query (for each element with a hover state) was a better (albeit time consuming) solution. I've tested it on iPhone and it solves the issue. It may not be the perfect fix but hope it helps! 

@media only screen and (min-width: 768px) {
  .sqs-button-element--secondary:hover {
    /* styles here */
  }
}

@mbockmaster, I so appreciate your help. Beginner question, I know 🙂 ~~ do I put it in one of the areas discussed below, or do I have to go... further in? Again, thank you. 

https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-code-to-your-site

@mike.bj, yes—I have the best clients, but they get understandably flummoxed when they discover it; they don't understand why this isn't an easy fix. A current client is a composer for... (think large media conglomerate). We're supposed to launch imminently. 

After rebuilding one of the sites from scratch and encountering the same issue, I've communicated (as gently as possible) to Support that it's a credibility/reputational issue, particularly when it comes to discerning, high-achievement clients. 

@tuanphan, thanks, will check it out. 

20 hours ago, CarolStatella said:

@mbockmaster, I so appreciate your help. Beginner question, I know 🙂 ~~ do I put it in one of the areas discussed below, or do I have to go... further in? Again, thank you. 

https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-code-to-your-site

@mike.bj, yes—I have the best clients, but they get understandably flummoxed when they discover it; they don't understand why this isn't an easy fix. A current client is a composer for... (think large media conglomerate). We're supposed to launch imminently. 

After rebuilding one of the sites from scratch and encountering the same issue, I've communicated (as gently as possible) to Support that it's a credibility/reputational issue, particularly when it comes to discerning, high-achievement clients. 

@tuanphan, thanks, will check it out. 

Hi @CarolStatella, yes, you'll add it to the custom CSS area! You'll need to update the class to apply it to each element with a hover state.

@mbockmaster, thank you! 

This is a JavaScript/jQuery solution, and site-wide animations can remain enabled. Timeout is optional but will allow the animation to be visible before the page redirects.

<script>
    $('.sqs-html-block a').on('touchstart', function () {
      var href = $(this).attr('href');
      setTimeout(function(){
        window.location.href = href;
      }, 100);
    });
</script>

Thank you @bradgood - I tried this but the project navigation still seems to need two clicks. Is there a way to include these text links in the above code? I tried installing in the Code Injections area - tried footer and header but no luck.

Hi @mbockmaster - thank you for the CSS.

Is it possible to check how I'd need to configure the CSS for this to work on text links within the projects pages? The project page bottom navigation between projects and any text links on the page all seem to require 2 clicks after page load to start working. Thank you for any help!

Here's an example @mbockmaster @bradgood

On 4/7/2024 at 11:59 AM, tuanphan said:

You try this

https://forum.squarespace.com/topic/259523-mobile-buttons-and-links-require-2-taps-to-work/?do=findComment&comment=737991

Hi @tuanphan - is it possible to check if this code can be made to work with the navigation text links that appear at the bottom of project pages? Thank you for any help!

5 hours ago, mike.bj said:

Hi @tuanphan - is it possible to check if this code can be made to work with the navigation text links that appear at the bottom of project pages? Thank you for any help!

It works for button or not? If works, I will adjust code for nav text link

Hi @tuanphan, it's quite strange. I've been doing some testing. 

The buttons are working for me, it's mainly just the portfolio pages, the navigation text links that automatically appear under each portfolio page where I'm having the issue. So I'm not sure in regards to the buttons.

I've found that having a gallery section on the project page stops the navigation link working, but if I remove the gallery it works. But if I turn animations on, it stops working again.

This is the site I've been testing on: https://ing-test-built-in.squarespace.com/
PW: ing

 Hi @tuanphan, it's quite strange. I've been doing some testing. 

The buttons are working for me, it's mainly just the portfolio pages, the navigation text links that automatically appear under each portfolio page where I'm having the issue. So I'm not sure in regards to the buttons.

I've found that having a gallery section on the project page stops the navigation link working, but if I remove the gallery it works. But if I turn animations on, it stops working again.

This is the site I've been testing on: https://ing-test-built-in.squarespace.com/
PW: ing

If you check the attached video - I delete the gallery and the link works with one click. Then I re-add the gallery and it goes back to needing two clicks.

Just now, mike.bj said:

 Hi @tuanphan, it's quite strange. I've been doing some testing. 

The buttons are working for me, it's mainly just the portfolio pages, the navigation text links that automatically appear under each portfolio page where I'm having the issue. So I'm not sure in regards to the buttons.

I've found that having a gallery section on the project page stops the navigation link working, but if I remove the gallery it works. But if I turn animations on, it stops working again.

This is the site I've been testing on: https://ing-test-built-in.squarespace.com/
PW: ing

If you check the attached video - I delete the gallery and the link works with one click. Then I re-add the gallery and it goes back to needing two clicks.

gallery.mov

I removed all CSS and any Code and didn't make a difference. It's almost like it's an issue with the gallery section and it interferes with the navigation somehow. I tried turning off lightbox etc in the gallery but didn't make a difference. I need to use the gallery section to display the images. 

But ideally if that code can work for the portfolio text nav and allow sitewide animations to run that would be amazing.

3 minutes ago, mike.bj said:

I removed all CSS and any Code and didn't make a difference. It's almost like it's an issue with the gallery section and it interferes with the navigation somehow. I tried turning off lightbox etc in the gallery but didn't make a difference. I need to use the gallery section to display the images. 

But ideally if that code can work for the portfolio text nav and allow sitewide animations to run that would be amazing.

It seems to be related to the 'masonary' gallery. If you change it to 'Grid:Simple' it goes away.

1 minute ago, mike.bj said:

It seems to be related to the 'masonary' gallery. If you change it to 'Grid:Simple' it goes away.

Must be some weird bug with the Masonary gallery section messing with portfolio / project page nav or anything sitting under it as it impacts the footer text links as well if it's on a page above them.

The issue is I've got portrait and landscape images and need to use the Masonary gallery section.

Hopefully if I've identified the culprit Squarespace can have their devs fix it.

Then I just need a fix so the links will still work with animations turned on....which I'm hoping your code will work for if I can implement it for the portfolio pagination text links.

On 4/16/2024 at 9:56 AM, bradgood said:

This is a JavaScript/jQuery solution, and site-wide animations can remain enabled. Timeout is optional but will allow the animation to be visible before the page redirects.

<script>
    $('.sqs-html-block a').on('touchstart', function () {
      var href = $(this).attr('href');
      setTimeout(function(){
        window.location.href = href;
      }, 100);
    });
</script>

Hi,

I customised the code a little to target all links across the site. It seems to have removed my issues with Project Pagination links not working. @bradgood - would you see any potential issues using the script below on a Squarespace site? Originally I tried your code but was still experiencing the issues for various links such as the Project Pagination and footer text links...but applying it generally to any <a> tag seems to have fixed them all.

But I'm no coding expert so was hoping to check if you think this could cause unforseen issues.

Thank you! Mike.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script>
$('a').on('touchstart', function () {  // This selector targets all <a> tags
var href = $(this).attr('href');  // Gets the href attribute from the clicked link
setTimeout(function() {
window.location.href = href;  // Redirects to the link after a 100ms delay
}, 100);
});
</script>