Click event might need two taps on mobile browsers about material-scrolltop HOT 5 OPEN

Hi @jjozsi can you please provide any example where the event is not triggered? You can modify it in demo folder.

Your solution looks good BUT touchstart is fired too early, so button will never be marked as :active and ripple animation will not be triggered :(

from material-scrolltop.

Hi, first, the ripple effect doesn't work on desktop and iOS Safari but I've tested the demo on Chrome on Android and indeed it's there.
I implemented the code with a Bootstrap 4 button markup with most of the original styles removed and it only worked for the second tap on iOS Safari, but again BS has it's only default :hover styles.
Button markup:

<button class="material-scrolltop btn btn-light btn-lg" type="button"><i class="fas fa-chevron-up"></i></button>

Remaining styles:

.material-scrolltop {
    position: fixed;
    max-width: 0;
    max-height: 0;
    padding: 0;
    border-width: 0;
    bottom: $mst-gutter;
    right: $mst-gutter;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
    cursor: hand;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1);
    overflow: hidden;
    i {
        margin-right: 0;
    }

    &.reveal {
        max-width: 4rem;
        max-height: 4rem;
        padding: $mst-padding;
        border-width: $border-width;
    }
}

from material-scrolltop.

What do you think about this update? https://github.com/bartholomej/material-scrolltop/tree/fix/mobile-click (Demo is also updated)

As you can see, there is a hack with :focus to keep animation working :)
0f3cc02

from material-scrolltop.

Awesome, thanks :)

from material-scrolltop.

Hi there,
Unfortunately, if the page also have other buttons ( https://slovacdomu.cz ), then those buttons need two taps on IOS mobile browsers :( Tested on Iphone 7,8,11
Is there any solution?

from material-scrolltop.