[Resolved] Disable Hover for Mobile Buttons

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

[Elvin]

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

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

[Elvin]

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

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

[Elvin]

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

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

[Elvin]

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

[Author]

Posts