`mouseDown` doesn't work well on mobile

[bengolds]

SSCCE

Expected behavior: When using mouseDown, I'd expect it to apply the same styles when the user has touched the element.

Actual behavior: On iOS, you need a touchstart event attached to an element in order for the :active selector to work. Additionally, on iOS there is a frame or two rendered between the active selector being released and the mouseDown event being handled by Elm. You can see it in this video, or by opening up the Ellie embed on an iPhone. On Android, there is a long delay before the selector that becomes active and it appears to be different than the infamous 300ms tap delay.

[alexkorban]

#unexpected

[tankorsmash]

Is there a workaround for this?

edit: https://github.com/mpizenberg/elm-pointer-events works well in the 2 minutes testing:

onTouchStart : Msg -> Element.Attribute Msg
onTouchStart msg =
    Element.htmlAttribute <| Touch.onStart (always <| msg)


onTouchMove : Msg -> Element.Attribute Msg
onTouchMove msg =
    Element.htmlAttribute <| Touch.onMove (always <| msg)


onTouchEnd : Msg -> Element.Attribute Msg
onTouchEnd msg =
    Element.htmlAttribute <| Touch.onEnd (always <| msg)


onTouchCancel : Msg -> Element.Attribute Msg
onTouchCancel msg =
    Element.htmlAttribute <| Touch.onCancel (always <| msg)

el [onTouchStart TouchedButton] <| text "Button"