Mapbox-gl-js: Can't render a simple map example on Android Chrome

[gvieiradot]

mapbox-gl.js version: 0.26.0
Chrome version: 53.0
Android version: 4.1.1
Device: Galaxy X

Steps to Trigger Behavior

1. I created a page with that simple demo: https://www.mapbox.com/mapbox-gl-js/example/check-for-support/;
2. Try to open it via my android device.
   

   Expected Behavior

Open on my device with no errors;

Actual Behavior

When I try to open via Android Chrome the map imagery crashes. I can see it for some milliseconds and then it crashes, leaving only the labels;
At my computer it work just great.

[lucaswoj]

@gvieiradot Do you see anything in your phone's web browser's console?

[gvieiradot]

How can I open the Console in mobile chrome?

[lucaswoj]

https://www.google.com/search?q=How+can+I+open+the+Console+in+mobile+chrome

[benparkergit]

I had the same issue on latest Chrome, Mac: Version 56.0.2924.87 (64-bit).

Solution: I had disabled hardware acceleration in Chrome settings for some other reason.

Re-enabling it made WebGL work again.

[ChrisBellew]

I have the same issue using a Samsung Galaxy S6 on BrowserStack.

Android: 5.0.2
Chrome: 55.0.2883.91

When I visit https://www.mapbox.com/mapbox-gl-js/example/check-for-support/
...it looks like this: http://imgur.com/a/SqOPl
...devtools is mostly empty: http://imgur.com/a/2bu4e

[andrewharvey]

I noticed that on the Note 4 Chrome browser on BrowserStack too. http://mapbox.github.io/mapbox-gl-supported/diagnostics.html doesn't seem to indicate any issues:

[ghost]

I have the same problem on android devices. on the first moment I see map background, and after that showing only text layer with labels.

Android ver. / Chrome ver.: https://www.dropbox.com/s/wtlfskbfu1guqeh/IMAGE%202017-06-21%2012%3A37%3A51.jpg?dl=0

[dagjomar]

I can also confirm we are experiencing issues of this kind. Same errors as mentioned by others here.

Uncaught TypeError: Cannot read property 'resize' of undefined
and
Error: Failed to initialize WebGL

[aendrew]

FWIW (and possibly not related to the original issue; posting here in case it helps someone finding this via Google) I was running into similar issues in IE11 in a VM, but then I realised the following option was being passed to the Map() constructor:

failIfMajorPerformanceCaveat: true

This will cause MapboxGL to throw the "Failed to initialize WebGL" error if running on a particularly rubbish platform.

[Altiano]

Any new updates about this issue?
I also had open an issue, I guess that could be duplicate. #4712
In my case, I use zenfone 5 (KitKat)

[dagjomar]

Also requesting an update. Seeing as Adroid 5 has a relatively large market share, it must surely impact a lot of users, and be a high priority?

[yipcma]

same issue, map tiles not rendering, but text and markers show, on android (kindle fire)

[danswick]

Noting that this issue was reported on a both a Galaxy S6 and Galaxy Tab 3 for both Chrome and the Samsung "browser."

[Altiano]

@danswick How about Asus Zenfone 5?

[stereobooster]

I have this issue with puppeteer, which is headless chrome for desktop (MacOS X in my case). But headless chrome claims it supports WebGL https://bugs.chromium.org/p/chromium/issues/detail?id=617551

TypeError: Cannot read property 'resize' of undefined

Error: TypeError: Cannot read property 'resize' of undefined
    at resize (../node_modules/mapbox-gl/dist/mapbox-gl.js:398:5239)
    at resize (../node_modules/mapbox-gl/dist/mapbox-gl.js:398:2910)
    at n.componentDidMount (../node_modules/react-mapbox-gl/lib/map.js:132:0)
    at componentDidMount (../node_modules/react-dom/cjs/react-dom.production.min.js:169:71)
    at Nh (../node_modules/react-dom/cjs/react-dom.production.min.js:180:195)
    at c (../node_modules/react-dom/cjs/react-dom.production.min.js:183:347)
    at k (../node_modules/react-dom/cjs/react-dom.production.min.js:184:366)
    at p (../node_modules/react-dom/cjs/react-dom.production.min.js:188:389)
    at y (../node_modules/react-dom/cjs/react-dom.production.min.js:187:415)
    at c (../node_modules/react-dom/cjs/react-dom.production.min.js:248:42)

[mourner]

@stereobooster I've run GL JS with puppeteer without issues, maybe it's something to do with third-party libraries like react-mapbox-gl from your trace?

[stereobooster]

@mourner but error originates from mapbox-gl.js - I will decode it with sourcemap and come back to you. Or will try vanilla mapbox on my machine (maybe this is something specific to my setup).

[stereobooster]

Yes your example works on my machine without any problems. Thanks @mourner I posted issue to alex3165/react-mapbox-gl.

[stereobooster]

I'm not alone here who get an error with headless chrome. There is also googlebot on page

created separate ticket https://github.com/mapbox/mapbox-gl-js/issues/5460

[dagjomar]

Running tests on Browserstack for Galaxy S6, Android 5, Chrome gives same issue as reported above:
Symbols rendering, but no fill layers or line layers. Only grey background with text symbols visible:

NOTE:
I DID see the underlying map flicker for a millisecond before disappearing. So the client is actually able to draw the layers at some point, but then seems to panic completely

[Altiano]

I believe this is happen after the first release of this year. Last year version it is working just fine.

Either the mapbox gl or the mobile browsers that is the issue

[andrewharvey]

Just to add another data point I tested this in Chrome 62.0.3202.4 on Android 7.1.2 and it's working fine for me.

[tetreault]

Just to add on here. My coworker and I both have Late 2016 MacBook Pros w/ intel iris 550 for graphics. Chrome v65 64-bit works fine for me, for her it says the usual "failed to initialize webgl". She then can load the page in safari and it works perfectly.

I can confirm this block of could alerts that WebGL isnt supported when run in her browser:

function detectWebGLContext () {
    var canvas = document.createElement("canvas");
    // Get WebGLRenderingContext from canvas element.
    var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    // Report the result.
    if (gl && gl instanceof WebGLRenderingContext) {
        alert("Congratulations! Your browser supports WebGL.");
    } else {
        alert("Your browser or device may not support WebGL.");
    }
}

detectWebGLContext();

For me I needed to enable the hardware acceleration setting in her Chrome settings, and relaunch the browser. This is unfortunate UX, but I can for people viewing our client's project, catch the thrown WebGL error from MapBoxGL and instruct the users to enable hardware acceleration.

I will note, I still think there is some underlying bug. Because other coworkers have MapBoxGL render in their version of chrome (still version 65, 64-bit) w/o explicitly enabling hardware acceleration.

[trupples]

Bumping because I'm encountering the same issue. Map color appears for a fraction of a second after which I only get street names on a grey background.

[bravecow]

Android v5

WebGL Support: yes (webgl)
Version: WebGL 1.0 (OpenGL ES 2.0 Chromium)
Vendor: WebKit
Renderer: WebKit WebGL
Shading Language: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)
Max Texture Size: 4096
Subpixel bits: 8
Red bits: 8
Green bits: 8
Blue bits: 8
Alpha bits: 8
Depth bits: 24
Stencil bits: 8
Max Vertex Attribs: 16
Max Vertex Uniforms: 1024
Max Varyings: 15
Max Combined Textures: 48
Max Vertex Textures: 16
Max Textures: 16
Max Fragment Uniforms: 1024
Max Cube Map Size: 4096
Max Renderbuffer Size: 8192
Max Viewport Dims: 8192 x 8192
renderbuffer_depth: 24

OES_texture_float: false
OES_texture_half_float: false
WEBGL_EXT_lose_context: false
OES_standard_derivatives: true
OES_vertex_array_object: true
WEBGL_debug_renderer_info: true
WEBGL_debug_shaders: true

User Agent: Mozilla/5.0 (Linux; Android 5.0.2; SM-G920F Build/LRX22G) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.111 Mobile Safari/537.36
Browser vendor: Google Inc.
Browser version: 5.0 (Linux; Android 5.0.2; SM-G920F Build/LRX22G) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.111 Mobile Safari/537.36
Browser language: en-US
Available resolution: 360 x 640
Screen resolution: 360 x 640
Color depth: 32
Pixel depth: 32

Unmasked vendor: ARM
Unmasked renderer: Mali-T760

[dimitrivalax]

Hello,

UP !!!

I'm encountering the same issue. Map color appears for a fraction of a second after which I only get street names on a grey background.

[mikkom]

We are seeing similar issues on some Android tablets (at least Acer Iconia & Moto C Plus). Either the map is immediately completely white except for the labels or it exhibits this behavior when zooming out a bit. Here's a video showing the behavior with Acer Iconia device and official Mapbox streets example:

[damienalexandre]

Same issue spotted here with an Android Phone using latest version of MapboxGL.

WebGL Support: yes (webgl)
Version: WebGL 1.0 (OpenGL ES 2.0 Chromium)
Vendor: WebKit
Renderer: WebKit WebGL
Shading Language: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)
Max Texture Size: 4096
Subpixel bits: 8
Red bits: 8
Green bits: 8
Blue bits: 8
Alpha bits: 8
Depth bits: 24
Stencil bits: 8
Max Vertex Attribs: 16
Max Vertex Uniforms: 1024
Max Varyings: 15
Max Combined Textures: 96
Max Vertex Textures: 16
Max Textures: 16
Max Fragment Uniforms: 1024
Max Cube Map Size: 4096
Max Renderbuffer Size: 8192
Max Viewport Dims: 8192 x 8192
renderbuffer_depth: 24

OES_texture_float: false
OES_texture_half_float: false
WEBGL_EXT_lose_context: false
OES_standard_derivatives: true
OES_vertex_array_object: true
WEBGL_debug_renderer_info: true
WEBGL_debug_shaders: true

User Agent: Mozilla/5.0 (Linux; Android 7.1.1; Moto E (4) Build/NMA26.42-157) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Mobile Safari/537.36
Browser vendor: Google Inc.
Browser version: 5.0 (Linux; Android 7.1.1; Moto E (4) Build/NMA26.42-157) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Mobile Safari/537.36
Browser language: fr-FR
Available resolution: 360 x 640
Screen resolution: 360 x 640
Color depth: 24
Pixel depth: 24

Unmasked vendor: ARM
Unmasked renderer: Mali-T720

I can see the country delimitation flash and then disappear. I tried some default style mapbox://styles/mapbox/streets-v8 but this does not change anything.

What bother me the most is that there is no logs / error, so I cannot display the classic "your browser is not supported" message to my users. mapboxgl.supported() return true for both my phones.

With an older version of Chrome on the same version of Android, it work as expected:

WebGL Support: yes (webgl)
Version: WebGL 1.0 (OpenGL ES 2.0 Chromium)
Vendor: WebKit
Renderer: WebKit WebGL
Shading Language: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)
Max Texture Size: 4096
Subpixel bits: 8
Red bits: 8
Green bits: 8
Blue bits: 8
Alpha bits: 8
Depth bits: 24
Stencil bits: 8
Max Vertex Attribs: 16
Max Vertex Uniforms: 1024
Max Varyings: 15
Max Combined Textures: 96
Max Vertex Textures: 16
Max Textures: 16
Max Fragment Uniforms: 1024
Max Cube Map Size: 4096
Max Renderbuffer Size: 8192
Max Viewport Dims: 8192 x 8192
renderbuffer_depth: 24

OES_texture_float: false
OES_texture_half_float: false
WEBGL_EXT_lose_context: false
OES_standard_derivatives: true
OES_vertex_array_object: true
WEBGL_debug_renderer_info: true
WEBGL_debug_shaders: true

User Agent: Mozilla/5.0 (Linux; Android 7.1.1; Moto E (4) Build/NMA26.42-11-3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Mobile Safari/537.36
Browser vendor: Google Inc.
Browser version: 5.0 (Linux; Android 7.1.1; Moto E (4) Build/NMA26.42-11-3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Mobile Safari/537.36
Browser language: fr
Available resolution: 360 x 640
Screen resolution: 360 x 640
Color depth: 32
Pixel depth: 32

Unmasked vendor: ARM
Unmasked renderer: Mali-T720

So to recap my findings:

| Phone and browser | Background displayed on the map |
|-----------------------------------------|---|
| Android 7.1.1 with Chrome/56.0.2924.87 | ✔ |
| Android 7.1.1 with Chrome/69.0.3497.100 | ❌ |

Hope this can help :ok_hand:

[Altiano]

They just gonna let Android 7 users declined so that this issue is not relevant anymore.

[trupples]

They just gonna let Android 7 users declined so that this issue is not relevant anymore.

@Altiano What do you mean?

[ChrisLoer]

My first reaction looking at the screenshots here is that something's going wrong with the stencil buffer, because both the "background" and "symbol" layers are drawing correctly -- and those are two layer types that don't use the stencil buffer. The other layer type that doesn't use the stencil buffer is "circle". Could someone with a device that reproduces the problem try adding a circle layer to the map (a la https://www.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/ although it doesn't have to be data-driven)? My hunch is that the circle layer will render correctly. If that's true, it's evidence we should be looking for difference in the stencil implementations, although I still wouldn't know what exactly to look for.

[ChrisLoer]

Oops, I didn't notice on my first pass through the comments that this reproduces on the BrowserStack Galaxy S6 image -- I can test and reproduce there. And, indeed, circle layers draw just fine. I will investigate further.

[mikkom]

Yep, I can see this even on a Galaxy S8 with Android 8 when running a PWA. When the app starts the map works just fine but if I switch to another app and go back to the running app after, say, several hours the map often shows as in the attached picture. Closing the app and restarting it always fixes the problem. Not sure if this helps but just thought to bring it up.

[ChrisLoer]

It turned out to be a depth buffer issue rather than a stencil buffer issue. We have a proposed fix at #7471 -- please give it a try if you have a chance! It's a workaround that shouldn't be necessary, but is easy to do, and it fixes the rendering problem on the BrowserStack Galaxy S6 Chrome image I've been using for reproduction. Hearing back from more of you will help us understand how complete a fix it is. For your convenience if you haven't set up a gl-js build environment before, you can use a packaged version I made with the fix here: https://chrisloer.github.io/mapbox-gl-clear-depth.js. Thank you!

[Altiano]

@trupples I mean Android 4.1.x

[mikkom]

@ChrisLoer I tried the packaged version on the Acer Iconia device and the map now seems to work correctly! When zooming out a lot it could take some time for the new tiles to show up, but I never saw the blank background issue.

I will continue monitoring the situation with the Galaxy S8 since with that device it took some time to repro the issue. In any case, looks really promising so far. Thanks for looking into this! 👏

[ChrisLoer]

Great! I also confirmed the fix worked on the BrowserStack Note 4 Chrome image. I merged #7471 so I'm going to mark this fixed -- if you're still seeing the rendering issues after the fix, please let us know! (there were a lot of problems reported on this issue, I suspect some of them were actually separate issues).