Mapbox-gl-js: Extrusions do not display on Android - WebGL "no buffer is bound" error

[ryanbaumann]

mapbox-gl-js version: 0.25.1 + current master build as of 10/10/2016
Andoird version Android 7.0, Nexus 5x Build NBD90W, Chrome 53.0.27815.124

Steps to Trigger Behavior

Minimal Demo:
Open http://bl.ocks.org/ryanbaumann/1f4c9efc3f74a4a7e07947b4f65c6fd3 on an Android device using Chrome or Firefox.

1. Create a 3D Extrusion feature using the fill-extrude-height style
2. Open the GL JS style on a mobile Android device using the latest Chrome or Firefox browser
3. 3D fill-extrude-height features do not render on map. In debug mode, Chrome throws the following error:

WebGL: INVALID_OPERATION: drawElements: no buffer is bound to enabled attribute

Errors in Console:

Expected Behavior

Fill layer with Fill-Extrude-Height paint property renders on mobile device.

Actual Behavior

Fill layer with Fill-Extrude-Height paint property does not render on mobile device.

[incanus]

@cammace sees this on a Nexus 5x and a friend of mine sees it on a Nexus 6, both with the oddball building at the bottom of https://www.mapbox.com/blog/mapping-3d-buildings/.

I have no problems with my Nexus 9 tablet.

[runa]

This happens to me aswell in this map
Given that Android 7.0 is newest android version, and in a few months _a lot of people_ will have it, I think the priority of this ticket should be raised.

[incanus]

Out of curiosity, what are people's experiences with this page?

https://dl.dropboxusercontent.com/u/575564/compat.html

It makes use of mapboxgl.supported({ failIfMajorPerformanceCaveat: true }). I wonder if it's a performance, memory, or other compatibility issue.

You should either see a map or a message saying there was a problem.

[runa]

@incanus displays a very beautiful world map :)

[soooh]

Hi there! Is there any progress on this issue, or do you have suggestions to work around it? Setting failIfMajorPerformanceCaveat to true gets the map to load with controls, tiles, and even the events that listen to the data layers without showing the extrusions. Ideally, if there were some kind of fail event, I could display a message saying the user's phone isn't compatible.

[davols]

Happens to me as well, using https://www.mapbox.com/mapbox-gl-js/example/3d-buildings/
Same console error with Android version 7.0.0 Oneplus A3003, chrome version 56.0.2924.87 and 55.0.2883.91

Also occured Android 6.0.1 OnePlus A3003, Chrome 55.0.2883.91 , and an HTC M10 (running android 7).
Does not occur on an Samsung S5 running 6.0.1 with Chrome 55.0.2883.91.

Apart from the Oneplus devices (they are using their own Oxygen OS), it seems to boil down to that the issue is only in Android 7.

[tianbaolin]

I also come across this problem。as @davols say,it appears on Android 7. I use v0.34 of Mapbox GL JS .so is there any other methods to solve this problem?

[davols]

The demo page, that seems to use v0.36 has working 3D buildings. Tested on a Oneplus 3 and a Google Pixel with Chrome.

[ryanbaumann]

@davols extrusions now work with Mapbox GL JS v0.36 on my Android 7.1.2 Nexus 5x with Chrome as well.

[mollymerp]

Awesome! Glad to hear this was fixed @ryanbaumann @davols – please reopen if this pops up again.