[Resolved] Disable Hover for Mobile Buttons

Home Forums Support [Resolved] Disable Hover for Mobile Buttons

Home Forums Support Disable Hover for Mobile Buttons

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1929546
    Ian

    We run many buttons inside Block Elements. I have noticed that if you quickly tap on a GB Button in iOS, you trigger the hover css (ie. button changes colours) but if the tap is quick enough, the button stays on the hover state but the link is not triggered? I am not running anything custom, just using GB Buttons. Is there a fix or a way to manually disable hover for mobile buttons? There is not Colour options for mobile so cannot remove Hover Colour to test. Any ideas?

    #1929664
    Elvin
    Staff
    Customer Support

    Hi Ian,

    Can you link us to the page in question? To inspect the button and see be sure if :hover is a appropriate thing to change.

    Tapping may be :active or :focus instead of :hover. Let us know. 😀

    A wise man once said:
    "Have you cleared your cache?"

    #1929715
    Ian

    Awesome sauce Elvin. Interestingly, this is not happening on other sites, just the one I added into the private URL. The button in the bar above the header as well as the 3 hero buttons on the homepage all exhibit this issue.

    Any ideas?

    #1929733
    Elvin
    Staff
    Customer Support

    You may have to manually override it.

    Try this CSS:

    @media (max-width:768px){
    .gb-button-wrapper a.gb-button-bd464efc:hover, .gb-button-wrapper a.gb-button-bd464efc:active, .gb-button-wrapper a.gb-button-bd464efc:focus {
        background-color: #e76f51;
        color: #ffffff;
        border-color: white;
    }
    }

    For the Hero section buttons, can you add page-hero to the main hero?

    And then try this CSS:

    @media (max-width:768px){
        .page-hero .gb-button-wrapper a.gb-button:hover, 
        .page-hero .gb-button-wrapper a.gb-button:active, 
        .page-hero .gb-button-wrapper a.gb-button:focus {
            background-color: transparent;
            color: #ffffff;
            border-color: white;
        }
    
        .page-hero .gb-button-wrapper-e1d2170f a.gb-button:hover, 
        .page-hero .gb-button-wrapper-e1d2170f a.gb-button:active, 
        .page-hero .gb-button-wrapper-e1d2170f a.gb-button:focus {
            background-color: #e76f51;
            color: #ffffff;
            border-color: white;
        }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1930434
    Ian

    Hi Elvin,

    I see what you are doing with the css. Made some adjustments and I believe this indeed fixed the tap issue in iOS. I wonder what could have caused this on this particular site. They do not happen on other sites even though they are built using the same button lift functionality taken from one of the site library sites. Interesting.

    Nonetheless, thank you! Fixed!

    #1930793
    Elvin
    Staff
    Customer Support

    Not exactly sure what’s the reason behind this yet but I’ve seen this a few things.

    For me, it happens when you do a quick tap swipe-like motion. (tapping with the fingers moving diagonally away from the button).

    With this motion, the button actually doesn’t execute, and is instead, being “focused”. (touch events have no “hover”, as fingers aren’t mouse pointers.)

    A wise man once said:
    "Have you cleared your cache?"

    #1930802
    Ian

    That is very interesting Elvin! Thanks for your patience and detailed approach.

    So the css you provided fixed 95% of the hanging issue in iOS. The top bar button is mostly fixed but the hero ones did exactly what you described. The quick tap rarely triggers the focus / hover state but the side swipe definitely triggers it 100% of the time. Good catch.

    I do have this for the buttons but removed it and the issue is still there. Interesting.

    .button-lift {
    -webkit-transition: all 500ms ease-in-out !important;
    transition: all 400ms ease-in-out !important;
    }

    .button-lift:hover {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
    }

    Maybe it’s the way iOS interpret things. No easy solution so let’s just leave it. At least the top nav button is fixed most of the time. That is the prominent CTA on the site. Thank you!

    #1930831
    Elvin
    Staff
    Customer Support

    Maybe it’s the way iOS interpret things. No easy solution so let’s just leave it. At least the top nav button is fixed most of the time. That is the prominent CTA on the site. Thank you!

    The issue actually occurs on Android – Chrome as well.

    No problem. Glad you found a workaround. 😀

    A wise man once said:
    "Have you cleared your cache?"

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