Map does not render on one certain computer in Chrome

[peterbodo]

Context

• mapbox-gl-js version:
  all

Report

Expected behavior:
map renders

Actual behavior:
map UI: gray background,
grabbing, Hash, Controls work as expected.
IE works fine.
Chrome with factory settings or even newly installed Chrome does not work.
This happens only in one computer (as we know) and happens with any mapboxgl map (even examples on the Mapboxgl website)
No error messages in console.

Steps to reproduce the behavior:

Need help here...

• link to example:
  e.g. https://www.mapbox.com/mapbox-gl-js/examples/

[averas]

Are you sure this computer supports accelerated 3D graphics and webgl?

http://webglreport.com/

[peterbodo]

Thanks, @averas

The same computer works fine with IE.

No webgl error is displayed.
Not even the alert on mapbox examples page.

[peterbodo]

@averas

WebGlReport test from the same browser/computer

[peterbodo]

[akshaykapadia]

I'm having same problem. Maps are not getting rendered only on my machine, it works fine everywhere else. what could be the possible issues?

[bhousel]

@akshaykapadia, @peterbodo, can you try the troubleshooting steps listed here?
http://superuser.com/questions/836832/how-can-i-enable-webgl-in-my-browser

[akshaykapadia]

Thanks @bhousel .

I tried that solution, all looking good but still not working.

thanks and really appreciate your help.

[bhousel]

What does it say when you browse to chrome://gpu/
Any issues there?

[akshaykapadia]

For webgl it shows, hardware accelerated.
So i think no problem there.

Webgl is enable and wired thing is that, it does work in IE 11 and safari too.

Just not working on chrome or firefox.

[peterbodo]

same story here. hardware accelerated. IE works, Chrome doesn't.
I guess it is not a webgl issue, because there is no related error in the console.

[indus]

I had the same issue, until I updated the driver of my graphics card. Other WebGL stuff was working normal in chrome, but not the rendering of mapbox-gl-js maps. Now it does.

[lucaswoj]

Sounds like this behavior is being caused by some system-specific problems. I don't see anything actionable for us other than documenting some troubleshooting steps (like updating graphics card drivers).

[peterbodo]

@lucaswoj
I guess the problem is too frequent to omit and it is not about webgl support in general, only Mapbox gl.
With my friend it was with an up to date NVidia Geforce 310M that Mapbox gl did not work (but webgl tests were fine). When he disabled it and worked with the less adnvanced motherboard chip (Intel (r) hd), it has worked.

[MichaelMarkieta]

@ansis we have been finding similar issues to this on our machines at Arup. Seems to be hardware related. What can I give you to troubleshoot? I can test this on maybe 10 different machine configurations.

[ckc11]

It looks like the latest version of Chrome, 49.0.2623.87 m, broke mapbox-gl maps for me. None of the maps even on the example pages work properly anymore.

[ansis]

When you open https://jsbin.com/resupaxepi/edit?html,output it should log something like this to the javascript console:

contextAttributes Object {alpha: true, antialias: false, depth: true, failIfMajorPerformanceCaveat: false, premultipliedAlpha: true…}`

Can you paste what it prints for you?

---

@MichaelMarkieta @ckc11 it would also be helpful if you could open http://webglreport.com/ on a machine it doesn't work on and copy the contents to a gist. Thanks!

[ckc11]

alpha: true
antialias: false
depth: true
failIfMajorPerformanceCaveat: false
premultipliedAlpha: true
preserveDrawingBuffer: false
stencil: true

[ckc11]

[ckc11]

Are we getting any closer to figure out what is the issue and what the solution may be?

[lucaswoj]

I’m not sure there’s much we can do here. Even if we figure out ​_why_​ rendering is broken, there’s a low chance we can fix it.

The problem is likely caused by either a bug in the graphics drivers OR a missing capability on the graphics card.

Anything to add @ansis @mourner @jfirebaugh @bhousel?

[mourner]

Totally random thought but there's a chance the bug could trigger by the way we render polygons — can someone check whether earcut-final branch has the same symptoms on affected machines?

[ansis]

The problem is likely caused by either a bug in the graphics drivers OR a missing capability on the graphics card.

It could be this, or we could be relying on something that is undefined or not guaranteed. It's hard to tell.

@ckc11 can you run https://www.khronos.org/registry/webgl/sdk/tests/webgl-conformance-tests.html and let us know if any of them fail for you?

[ckc11]

Attached are the results, thanks for looking into this. I have several other users in the office who have similar issues (hardware+chrome issue) if you need me to run tests on other computers (with diff hardware).

webgl-test-machine1.zip

(update, included is the full source so that results page works)

[ansis]

if you need me to run tests on other computers (with diff hardware).

This would be helpful!

[ckc11]

Here is another output of the khronos webgl conformance tests run on a different computer.

Interestingly, on this computer, the main www.mapbox.com/maps page works, but none of the examples in https://www.mapbox.com/mapbox-gl-js/examples/ work (all the maps are blank). Possibly different versions of mapbox-gl-js between the main page and the examples?

webgl-test-machine2.zip

[peterbodo]

Now we just have another computer in the team, which supports webgl but cannot render Mapboxgl

The results:
webgl-tests-dell.zip

Chrome, FF not showing the map (white), but from the console it is obvious that it is there, e.g. you can drag it.
controls are visible (navigation, attribution)

IE is fine.

[akshaykapadia]

I've attached test result of https://jsbin.com/resupaxepi/edit?html, everything looks alright still not working.

In regards to bug in graphics card, what I've tested :

• mapbox gl was working on my manager's pc, so I took out that graphic card and put it on my machine and tried to run mapbox gl.... didn't work.

so this is really strange... so really hard to figure it out what actually causing the problem!!!

[peterbodo]

So our problem is solved in both computer, which we had problem with.
We have found this issue:
#2270

And pitching the map really solved the problem.
Now, we go with this ugly workaround:
map.setPitch(1);
map.setBearing(-1);

[mourner]

@peterbodo have you also tried the earcut-final branch by chance?

[peterbodo]

@mourner :) I have no idea what is that....

[ckc11]

@peterbodo i was hopeful that your workaround would work for me but sadly setting the pitch/bearing didn't have any affect for any of my machines.

[ckc11]

@mourner The earcut-final branch did not work for me either (on the dev channel version of chrome 51.0.2687.0 dev-m (64-bit), but it DOES work on the Canary channel). This is what the earcut-final branch looks like for me on the dev channel of chrome:

I will test it on the stable channel of chrome later today.

[ckc11]

@peterbodo you can try these files (I just did a build of the earcut-final branch).

mapbox-gl-earcut-final.zip

[peterbodo]

@ckc11 Can you see the example rendering on this page?
https://www.mapbox.com/mapbox-gl-js/example/set-perspective/

[ckc11]

@peterbodo only with the canary build of chrome, I cannot see it with any other version of chrome.

And even with the canary build, it's not 100%, the shapes/colors get messed up a bit:

but the earcut-final branch seems to work 100% with no artifacts, etc. on canary.

[akshaykapadia]

@peterbodo awesome.... thanks a lot... setting up pitch and bearing worked for me...now all maps are running....
and even @ckc11 , that example is also working! That's really interesting and weird!!!
thanks

[afilp]

Same problems in my (latest) Chrome too.

See below what I see on the "Set pitch and bearing" example (also on the "Fly to" example):

This does not happen on 3 other PCs in our company (with latest Chrome too). But it is happening on my PC (with latest GPU drivers installed) and this should not be taken lightly, as I am an end user too. I am in charge of evaluating a possible migration of our map solution of 400K unique visitors per day from Google Maps to MapBox GL and it is kind of discouraging to realize that vector maps may not be prime for many PCs.

I love your GL implementation and would like to be positive on the migration but I cannot do that unless this problem is solved. Please take the extra effort to make any necessary changes on how you render your vectors (hoping that this can be done from your side). As you understand, nobody would like to tell their management that "an undetermined minority of the 400K unique visitors per day will not be able to see our maps properly". This would be a no go.

Thank you for your understanding and consideration. Looking forward to a resolution and let me know if I can be of any help for your tests.

[afilp]

If this is of any help, I have 2 graphic cards in use (simultaneously through a BIOS option to also use the motherboard's GPU for a 3rd monitor):

The Radeon HD 6450 was already updated. The Intel one (on the motherboard) had to be updated as it did not have the latest driver. I did the update, but this did not have any effect on the problem.

Note that on my IE Edge browser your examples work OK.

[ckc11]

Yes this is definitely a deal breaker if this cannot be solved for us as well.

As an update, the earcut final build that I had posted before is working 100% with Chrome 51 (dev channel) but strangely Chrome 52 (canary) has webgl disabled entirely. Version 0.18.0 of mapbox-gl is not working however on Chrome 51. This is what even the basic 0.18.0 map looks like in Chrome 51.

I am also on 2 graphics cards, Radeon 5450 and the onboard Intel. I've tried at least 6 versions of the Radeon driver (from old to latest), and it's the same issue with all.

[lucaswoj]

Earcut has merged now! 🎉 Let's ticket out any remaining rendering issues separately.

[pwilczynski]

For anyone who's trying to find the Earcut PR, it's here (#1606).

[swanstation]

I had the same issue even to the point where certain maps wouldn't render in the same browser. Some maps rendered grey, some checkered, some not at all, and some worked perfectly. I knew it couldn't be the VPU.

POSSIBLE FIX: I then noticed that the maps that weren't rendering had no map position; all of the values were 0 (bug). Try this: when viewing a map in style-edit mode, click "map position" in the upper right and enter values in the zoom, bearing, pitch, longitude, and latitude fields. Once you've entered values in these fields, the map should appear and you can zoom and pan normally. For some reason, you cannot zoom and pan out of the 0 values without manually entering them in with your keyboard first.

[nezirz]

I had a problem on Ubuntu 16.04, Chrome Version 62.0.3202.89 (Official Build) (64-bit)
This steps helped me

Ensure you’ve signed into your Chrome profile.
Try clearing your cache and cookies. Start by clearing from the time period you started facing the issue, then expand to “beginning of time”.
Use the incognito mode. If it works well, I'd suggest you disable the extensions temporarily (you could use chrome://extensions/ on the Chrome address bar) and re-enable them one at a time to determine which extension is misbehaving.
_