Home Forums Pro Themes Signify Pro Anchor link requires 2 touches on iOS mobile Safari

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #189395
    Damian Surr
    Participant

    Here’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,
    Damian

    #189472
    Psink
    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

    #189529
    Damian Surr
    Participant

    Hi @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-call

    But, 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,
    Damian

    #189587
    Damian Surr
    Participant

    Hello?

    #189605
    Damian Surr
    Participant

    What has happened to support?

    #189607
    Psink
    Keymaster

    We 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=af8ee934de87c71af3ff97f04bfc93dd

    Please let us know if this works

    • This reply was modified 1 year ago by Psink.
    #189820
    Damian Surr
    Participant

    Hi @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,
    Damian

    #189821
    Psink
    Keymaster

    you 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

    #189865
    Damian Surr
    Participant

    Finally 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

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.