Click event might need two taps on mobile browsers

[jjozsi]

I heavily modified the button markup and due to :hover styles the first tap on mobile did not trigger the click event on the button.

I suggest modifying the following line _.btnElement.click(function() { to _.btnElement.on('mousedown touchstart',function() {

That would make the click event fire under any circumstances.

[bartholomej]

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 :(

[jjozsi]

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

[bartholomej]

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 :) https://github.com/bartholomej/material-scrolltop/commit/0f3cc02100443e35e9a70be1340b905087858cbc

[jjozsi]

Awesome, thanks :)

[AMBIENTE1]

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?