Need to double-click buttons on mobile

Hi! 

I am having problems with all buttons and links on mobile. One has to double-click for them to respond. Works just fine on desktop. Can it have to to do with hover effect? Any fixes? 

Thanks! 

I am also having this issue!

Same here! Did anyone find the solution? @KickiH @SimpleEsthetics?

Hi, 

It has to do with animation. If you turn of the animation the buttons work fine on mobile. I am in contact with Squarespace support but have not received any time frame on when this can be fixed. 

I'm also having this issue - is seems to apply just to the first clicked link, wherever that happens to be on the page.

I can confirm that turning off animations restores the single-tap function on mobile 👍

how do you turn OFF animation?

Replying here as I also have this problem where a user has to click twice on mobile.

How many conversions have we lost because of this bug??

How do you turn off animations for the buttons?

Here to say I’m also having this issue across multiple sites (3 that I know of) on Chrome mobile. Shame that a standard setting Squarespace offers is causing issues like this. 

Guys, does somebody found a solution? It's driving me nutttts! 🤦‍♂️

I even tried JS to emit clicks, I tried to bind an automatic "double click" function to the element, … but nothing works. I think the global animation creating a stacking context issue somehow … which is magically solved after the first click on any(!!!) link. What kind of a bug is this?

Please help :)

Hi there! — I've been in contact with Squarespace over the last several weeks re: this very issue. So yes, I've turned off animations, but it makes a significant difference in the aesthetic of the site. 

Can this be prioritized? Like you, I'm at a loss as to what to do. 

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-block-button a').on('touchstart', function () {
      var href = $(this).attr('href');
      setTimeout(function(){
        window.location.href = href;
      }, 100);
    });
</script>

I have this issue on mobile iPhone buttons, with no animation (is the transition facilitated by the button considered an animation?).  @bradgood is the above code inserted in website tools, or as code injection on each page? I have a basic plan that doesn't allow code injection. Thanks.

Hi @bradgood, is there a way for this code to work for the project navigation links?

I tried installing but they still take two clicks.

On 4/16/2024 at 1:58 PM, mike.bj said:

Hi @bradgood, is there a way for this code to work for the project navigation links?

I tried installing but they still take two clicks.

This seemed to work for all links:

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

On 4/16/2024 at 9:55 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-block-button a').on('touchstart', function () {
      var href = $(this).attr('href');
      setTimeout(function(){
        window.location.href = href;
      }, 100);
    });
</script>

Hi @bradgood I used GPT and got to the solution below. I mentioned in another post on this topic - I had applied your script above to all <a> links on a page to try and fix the double tap issue across all links. But I was having an issue where elements such as scrolling down an image gallery was inadvertently launching the lightbox when it was a scroll and not a click.

I basically asked GPT to fix this issue and it spat out the code below. I've tested and seems to address the double-click issue across all links + doesn't inadvertently activate links while scrolling elements on touchscreen.

I have limited coding knowledge and relying on GPT - but it seems to work well. I'm a little worried if it could cause some other unforseen issue...e.g. could it mess with SEO etc. I'm not sure but if you have insight into this - e.g. if you can tell it won't mess with things like SEO I'd love your opinion on it! 🙂

Cheers, Mike

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
    $('a').on('touchstart', function (e) {
        var startTime = new Date().getTime();  // Record the time when touch starts
        var linkUrl = $(this).attr('href');    // Get the href attribute from the clicked link

        $(this).on('touchend', function () {
            var endTime = new Date().getTime();  // Record the time when touch ends
            // Check if the touch duration was less than 150ms, which implies it was a tap, not a scroll
            if (endTime - startTime < 150) {  
                window.location.href = linkUrl;  // Redirect to the link
            }
        });
    }).on('touchmove', function (e) {
        $(this).off('touchend');  // If the user moves the finger, it's a scroll, so don't follow the link
    });
</script>