Mapbox-gl-js: Control buttons too small for touch

[mapcarta]

After extensive testing with various mobile devices of various sizes and default browser scale levels, I've found that the default sizes of control buttons are simply too small for touch devices. All too often when the user taps a button, the user accidentally taps on the map instead.

Controls such as the zoom and geolocate buttons are currently 30 pixels wide and 30 pixels high. In my testing I've found that about 42 pixels could be more appropriate for easy interaction that catches almost all taps.

.mapboxgl-ctrl-group > button {
width: 42px;
height: 42px;
}

In addition the compact attribution button is currently 21 pixels wide and 21 pixels high. This can be very difficult to tap at all, perhaps making users think the button does nothing at all. As this control is used differently and infrequently, I've found that a size of about 32 pixels could be more appropriate.

a.mapboxgl-ctrl-logo.mapboxgl-compact {
width: 32px;
height: 32px;
}

In addition but perhaps a bit too complex, it might also help to have the small strips of map between the buttons and the edges of the screen, and between adjacent buttons, not receive any pointer events at all. Currently these strips are just 10 pixels wide/high. According to touch screen design principles 10 pixels is definitely too small for a touch target. The solution isn't as simple, but could be accomplished as well.

[ChrisLoer]

Hi @mapcarta, thanks for using Mapbox! This is good input, although I think we'll be pretty cautious about changing the default sizes in mapbox-gl.css because it would affect the existing behavior/appearance for everyone who's happy with the current defaults. These are meant to be easy to override to suit your use case.

I'm going to close this issue because I don't think we'll take immediate action, but the feedback about touch target size is good. I'm ccing @nickidlugash on our design side and @mollymerp so that we can keep this feedback in mind if we do a round of revision to mapbox-gl.css.

[ryanhamley]

For what it's worth, most web accessibility guides recommend a touch target size of at least 40px. For example, Google's recommendation on accessibility and touch targets is:

A minimum recommended touch target size is around 48 device independent pixels on a site with a properly set mobile viewport. For example, while an icon may only have a width and height of 24px, you can use additional padding to bring the tap target size up to 48px. The 48x48 pixel area corresponds to around 9mm, which is about the size of a person's finger pad area.

[KunsLand]

Hi all, I found this issue is caused by the viewport automatically scaled in mobile browser.
I disable the automatic scale in by adding a meta tag in head of the html.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" class="">

Hope it help someone else have met the same issue.