Thursday, 5 May 2022

Active Element Issue on Firefox for Android

I want a button to change color while the user has clicked on the button and hasn't released it yet (on Mobile: while the user touches the button).

For changing the color I did:

input[type='button']:active{
  background-color:#415575;
}

And for disabling text selection on Mobile (when the user touches and holds) I did:

@media only screen and (max-width: 600px) {
    #test_btn {
      -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
         -khtml-user-select: none; /* Konqueror HTML */
           -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                      supported by Chrome, Edge, Opera and Firefox */
    }

Codepen

This solution works in Desktop. It also works in Mobile for Android Chrome, iOS Chrome, iOS Firefox, but not in Android Firefox (tested on 99.2.0). On Android Firefox the color doesn't change back to the original when the touch ends. In other words it seems the element stays in the "active" state even after the touch ends.



from Active Element Issue on Firefox for Android

No comments:

Post a Comment