CarolStatella Posted February 1 Posted February 1 (edited) 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. Edited February 1 by CarolStatella Redfish and mike.bj 2
CarolStatella Posted February 1 Author Posted February 1 On 2nd support try, Squarespace was able to replicate the issue, and escalated it to engineering & design. mike.bj 1
tuanphan Posted February 3 Posted February 3 Have you found a solution to fix yet? mike.bj 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
CarolStatella Posted February 5 Author Posted February 5 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. Redfish and PaulaGphoto 2
tuanphan Posted February 6 Posted February 6 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
CarolStatella Posted February 14 Author Posted February 14 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.
Solution CarolStatella Posted February 19 Author Solution Posted February 19 Squarespace support said that this issue happens on iPhone Safari browsers, and that disabling animations is a temporary workaround.
mike.bj Posted April 6 Posted April 6 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. CarolStatella and Redfish 1 1
tuanphan Posted April 7 Posted April 7 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 CarolStatella and mike.bj 1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
mbockmaster Posted April 8 Posted April 8 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 */ } } tuanphan 1
CarolStatella Posted April 8 Author Posted April 8 (edited) @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. Edited April 8 by CarolStatella
mbockmaster Posted April 9 Posted April 9 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. CarolStatella 1
bradgood Posted April 15 Posted April 15 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> tuanphan and CarolStatella 2
mike.bj Posted April 16 Posted April 16 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.
mike.bj Posted April 16 Posted April 16 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! CarolStatella 1
mike.bj Posted April 16 Posted April 16 Here's an example @mbockmaster @bradgood RPReplay_Final1713238983.mov CarolStatella 1
mike.bj Posted April 19 Posted April 19 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!
tuanphan Posted April 19 Posted April 19 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
mike.bj Posted April 21 Posted April 21 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
mike.bj Posted April 21 Posted April 21 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
mike.bj Posted April 21 Posted April 21 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.
mike.bj Posted April 21 Posted April 21 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.
mike.bj Posted April 21 Posted April 21 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.
mike.bj Posted April 21 Posted April 21 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>
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment