Mapbox-gl-js: Geocoder control's flyTo animation on result selection gets interrupted on Android devices

[annapowellsmith]

I have copied and pasted the sample code from the Mapbox geocoder example into a test example, with no changes or additions.

In the test example, in Chrome on Android, selecting an item from the dropdown does not zoom or pan the map.

The issue does not occur on the desktop browsers I've tried, so I assume it is related to touch events. I've tried running the Chrome remote debugger, and I cannot see any console warnings or errors in the mobile browser. Switching between HTTP and HTTPS also doesn't seem to make a difference.

This may be related to the closed issue #4277 or the open issue #3720, but I feel this probably needs its own issue (or at least to reprioritise #3720), since rather than a feature request it is an actual user-facing bug. On my current project several users have reported it.

Most odd is that the Mapbox geocoder example itself seems to work fine in Chrome/Android.

[jfirebaugh]

It's possible that #4487 fixes this.

[anandthakker]

@annapowellsmith do you happen to know if this bug is still occurring using the most recent version of Mapbox GL JS?

[annapowellsmith]

Afraid so - updated to mapbox-gl 0.39.1 and mapbox-gl-geocoder v2.1.0, and still failing at https://anna.ps/sandbox/test.html for me (Android 7.0 / Chrome 59.0 / Moto G4).

[tdprindle]

I'm having this issue as well still. It would be great to get a fix as I don't want to build it ourselves. For the time being we had to disable the typeahead on Android and just go with whatever the first result was: https://symptoms.webmd.com/cold-flu-map/default.htm.

[andrewharvey]

This bug happens because on Android Chrome after selecting an item from the drop down the on screen keyboard closes which causes the window to resize, and a window resize causes gl js to stop any current animations (like the fly to the geocoder was doing).

It's not an issue on iOS Safari as the on screen keyboard sits on top of the window without actually resizing it.

Indeed when I changed the animated flyTo in the geocoder with a { duration: 0 } option it resolved the issue as the camera was able to update immediately and so was never cancelled by the window resize. Unfortunately this isn't such a simple workaround until https://github.com/mapbox/mapbox-gl-geocoder/issues/51 lands.

As for a proper solution, I feel it should come from #4041 which would allow camera animations to continue regardless of a window resize.

[andrewharvey]

https://gist.github.com/andrewharvey/f388e9197eafa62aa118535787a74825 is an example workaround by disabling camera animation

[jdaudier]

Will this be fixed anytime soon? Thanks!

[anandthakker]

Hi @jdaudier - As @andrewharvey mentioned, #4041 is the underlying issue that causes this, so I'm going to close this issue -- let's track progress on this bug over at #4041.

[andrewharvey]

@jdaudier will the workaround from https://github.com/mapbox/mapbox-gl-js/issues/4481#issuecomment-357855553 work for you until this is fixed?

[jdaudier]

@andrewharvey You mean this gist? I tried it and it stopped the flyTo even for desktop usages.

[andrewharvey]

@jdaudier yes that's it, it's a crude workaround but at least gives a functional mapbox-gl-geocoder on Android, you can add your own Android detection to treat it differently from iOS. That's what I've been doing until this is fixed.

[jdaudier]

@andrewharvey I'm not clear what this is doing. Do I need this part?

if (result.bbox) {
   var bbox = result.bbox;
   map.fitBounds([[bbox[0], bbox[1]],[bbox[2], bbox[3]]], { duration: 0 });

Also, mind sharing the code you're using to detect Android if you have it handy?

[andrewharvey]

@jdaudier The geocoder could return a bbox or it could just return a single point, this ensures that in either case the duration of the animation is 0 to skip the animation and jump straight to the desired view.

if (/Android/i.test(navigator.userAgent)) {

should do the trick, one code path when the duration is 0 the other where the duration option is omitted.

[jdaudier]

@andrewharvey Thanks! Will try that. I hope the fix will be in soon so Android users will get to experience the cool flyTo feature.

[jdaudier]

@andrewharvey I had to do it like this to get it to work... put duration in the first options object.

this.map.flyTo({
  center: searchResult.center,
  duration: 0
});