Home › Forums › Pro Themes › Signify Pro › Anchor link requires 2 touches on iOS mobile Safari
- This topic has 8 replies, 2 voices, and was last updated 1 year, 3 months ago by
Damian Surr.
-
AuthorPosts
-
April 23, 2023 at 11:10 pm #189395
Damian Surr
ParticipantHere’s an example link:
https://www.midlifechangecoach.com/
On mobile Safari, on iOS, the 2 links anchor links (in Hero section and half way down the page) require 2 touches to work.
After they have worked once, they tent to keep working. So, you need to refresh the page to see the problem again.
From doing a bit of research and getting support in other places, I ‘think’ that the first touch seems to activate the hover. Then a second touch goes to the Anchor link.
Also, the problem instantly goes away if I switch theme. So, I think it’s something to do with the Signify Pro theme.
The buttons in this example are “Kadence Blocks – Advanced Button”s. However, I have just done a separate test with standard WordPress buttons and the problem is just the same.
How can this be fixed?
Thanks,
DamianApril 27, 2023 at 3:02 am #189472Psink
Keymaster@DAMIAN, we apologize for the late follow-up.
It looks like that link needs a complete URL like this https://www.midlifechangecoach.com/#intro-call
May 3, 2023 at 11:08 pm #189529Damian Surr
ParticipantHi @PSINK,
Thanks for responding, but that doesn’t fix the problem.
Take a look at this test page:
https://www.midlifechangecoach.com/buttontest/I have edited the link on that page so that it points to:
https://www.midlifechangecoach.com/buttontest/#intro-callBut, the issue is still exactly the same. The button needs to be pressed twice on iOS mobile Safari (iPhone).
I have also added a new standard WordPress button, underneath (the red one), with no CSS changes. This also requires two touches.
It must be an issue with the theme. The first touch seems to activate the hover state, and the second touch ‘works’.
Is it possible to remove the hover state on touch devices?
Or is there any other solution that you can think of?
Thanks,
DamianMay 9, 2023 at 10:41 am #189587Damian Surr
ParticipantHello?
May 11, 2023 at 9:28 am #189605Damian Surr
ParticipantWhat has happened to support?
May 11, 2023 at 12:07 pm #189607Psink
KeymasterWe apologize for a late follow-up
I have a solution, hope this will work on your site
here is the js code, this will trigger the click event which will scroll the target to top
$(‘.kb-btn_4700f2-a7’).click( function(){
$(‘html, body’).animate({
scrollTop: $(“#intro-call”).offset().top
}, 200);
} );Please add this js on your site, here is the screen record on how to add js
https://www.awesomescreenshot.com/video/17317819?key=af8ee934de87c71af3ff97f04bfc93ddPlease let us know if this works
-
This reply was modified 1 year, 4 months ago by
Psink.
May 23, 2023 at 11:55 am #189820Damian Surr
ParticipantHi @PSINK,
Thanks for this. I haven’t had time to test it yet, but it looks like it will only affect one button.
How can I fix all buttons?
Thanks,
DamianMay 23, 2023 at 11:58 pm #189821Psink
Keymasteryou can repeat the code
$(‘btn – class_name or id’).click( function(){
$(‘html, body’).animate({
scrollTop: $(“target – classname or id”).offset().top
}, 200);
} );note. if you are using a class name theme put ‘.’ at the beginning if it is id then put ‘#’
for example
$(‘.kb-btn_c704ea-58’).click( function(){
$(‘html, body’).animate({
scrollTop: $(“#intro-call”).offset().top
}, 200);
} );‘kb-btn_c704ea-58’ is a unique class of button and ‘intro-call’ is a id of target
May 30, 2023 at 5:44 pm #189865Damian Surr
ParticipantFinally got around to trying this.
It works!
🙂
Thank you @PSINK !
I’ve just added a class to all of the relevant buttons, which fixes them all in one go.
Thanks again,
Damian -
This reply was modified 1 year, 4 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.