Skip to content

Touch events are not working in draw v1.4.0. Can't draw polyline or polygon on iPhone. #1154

@jaybo

Description

@jaybo

2.12.0: mapbox-gl
1.4.0: mapbox-gl-draw

Steps to Trigger Behavior

  1. Open Mapbox doc page: https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/
  2. Draw a polygon with the mouse. Edit the polygon with a mouse. All good.
  3. Try the same thing on a touch screen, either touch monitor or iPhone. Touch events are mostly non-functional.

Expected Behavior

Polygon or polyline can be drawn and edited on touch devices.

Actual Behavior

Most touch events are not processed correctly when drawing or editing polygon or polyline.

Other

  1. In my large scale mapbox-gl app I've reverted draw to v1.3.0 and everything works fine. Using draw v1.4.0 I can't draw or edit polylines.
  2. adding touchBuffer: 25 does not improve the issue.
  3. I'm guessing this is related to the preventDefault checkin fdd2359
  4. Here's another sample codepen demonstrating the issue. https://codepen.io/jaybonomad/pen/ZEjNgYj
    On a desktop Windows11/Chrome touchscreen it generates a series of possibly related messages for touch events such as:
[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. 
Consider marking event handler as 'passive' to make the page more responsive. 
See https://www.chromestatus.com/feature/5745543795965952

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions