Mapbox-gl-js: Display an error message when calling "new Map()" but "mapboxgl.supported()" is false

[johnlfoleyiii]

MapBoxGL does not initialize in Chrome:

Script:
https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js

Error Source:
https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/js/ui/map.js

Error:
Uncaught TypeError:
Cannot read property 'resize' of undefined
resize @ map.js:173
module.exports @ map.js:108
(anonymous function) @ GETBeacons:26

Page where error is occuring:
http://staging.beaconsinspace.com/GETBeacons

Chrome Version:
Google Inc.
Copyright 2016 Google Inc. All rights reserved.
Google Chrome 51.0.2704.103 (Official Build) (64-bit)
Revision aa7c8d23c098e96a388ffedf6698230bda650bb3-refs/branch-heads/2704@{#723}
OS Mac OS X
Blink 537.36 (@aa7c8d23c098e96a388ffedf6698230bda650bb3)
JavaScript V8 5.1.281.65
Flash 22.0.0.209
User Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
Command Line /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --flag-switches-begin --flag-switches-end
Executable Path /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
Profile Path /Users/justinmann/Library/Application Support/Google/Chrome/Default
Variations f19a86b5-3f4a17df
b3888d8d-afba0f91
6345b824-3d47f4f4
7c1bc906-f55a7974
ba3f87da-ca7d8d80
f049a919-3f4a17df
775ebbd7-3f4a17df
31362330-3f4a17df
c70841c8-a2567007
f15c1c09-ca7d8d80
db19c37b-4ad60575
165e16d1-3f4a17df
9e5c75f1-619fcd6c
2c3080ba-ca7d8d80
f5dd6118-3d47f4f4
f79cb77b-3d47f4f4
b7786474-64e7d9a
73a8d7f1-ca7d8d80
4ea303a6-f23d1dea
4117e878-f2d23ef0
9736de91-ca7d8d80
dbffab5d-ca7d8d80
12a73824-3f4a17df
f47ae82a-86f22ee5
3ac60855-486e2a9c
f296190c-4235cfc1
4442aae2-a90023b1
ed1d377-e1cc0f14
75f0f0a0-d7f6b13c
e2b18481-3a9ae350
e7e71889-e1cc0f14
c674d85e-3f4a17df
6ab14220-3f4a17df

[johnlfoleyiii]

This happens on MapBoxGL Version 0.11.4 as well:

https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.4/mapbox-gl.js

https://www.beaconsinspace.com/GETBeacons

[PhilippGB]

I have the same error with Chrome 52.02743.116 64-bit.
The error occur on custom map with mapbox-gl (Version 0.21.0 an 0.22.0) and here too:
https://www.beaconsinspace.com/GETBeacons

This example page of mapbox gl show an unsupported error.
https://www.mapbox.com/mapbox-gl-js/examples/

if i execute the code to initialize the map i get same error.

Failed to initialize WebGL
Cannot read property 'resize' of undefined

All pages works in FireFox 44.0.2 and IE 11.0.9600.18427 on same machine.

I found an equal or similarity problem in this thread.
https://github.com/mapillary/mapillary_issues/issues/1230

[PhilippGB]

with Chrome 49, FireFox 44.0.2 and IE 11.0.9600.18427 i got on this page:
http://webglreport.com/?v=1 the message: "This browser supports WebGL 1"
With Chrome 52 i got the message "This browser supports WebGL 1, but it is disabled or unavailable."
"Sometimes this is the result of older video drivers being rejected by the browser. Try updating your video drivers if possible."

other machine with Chrome 52 works without problems.

It looks like a lokal gpu problem.
My GPU is: AMD Radeon HD 7800 with up-to-date Version 13.251.9001.1001

@johnlfoleyiii

• what do you see on this page: http://webglreport.com/
• try to install older Chrome Version 49 (i got other crazy 404 errors :-/ )
  
• try other machine with different GPU

[lucaswoj]

My guess is that your browser does not support the set of WebGL features required by GL JS. Although mapbox-gl-supported is returning the correct value, we are trying to initialize the map anyway and triggering an unhelpful Cannot read property 'resize' of undefined error.

@johnlfoleyiii What do you see when you navigate to http://mapbox.github.io/mapbox-gl-supported/ on the affected machine?

[johnlfoleyiii]

Yes,

I get that "MapBox GL is not supported"

I have found out how to fix the issue:

You must enable "hardware acceleration" in the browser settings.

So going to chrome://settings and then searching for "hardware acceleration" and enabling it will solve the problem.

Is there a way to solve this without having to enable hardware acceleration?

On Aug 15, 2016, at 4:00 PM, Lucas Wojciechowski [email protected] wrote:

My guess is that your browser does not support the set of WebGL features required by GL JS. Although mapbox-gl-supported is returning the correct value, we are trying to initialize the map anyway and triggering an unhelpful Cannot read property 'resize' of undefined error.

@johnlfoleyiii https://github.com/johnlfoleyiii What do you see when you navigate to http://mapbox.github.io/mapbox-gl-supported/ http://mapbox.github.io/mapbox-gl-supported/ on the affected machine?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/mapbox/mapbox-gl-js/issues/2945#issuecomment-239954617, or mute the thread https://github.com/notifications/unsubscribe-auth/ACAatHb90dt-wE1xbJerCiaApzkFIyVBks5qgO-dgaJpZM4JdEeH.

[PhilippGB]

Hardware acceleration is enabled and i got "MapBox GL JS is supported" on test site.
I still get the "Cannot read property 'resize' of undefined" Error.

[Zev19]

I'm getting this same issue with IE 10 and below @johnlfoleyiii ? It doesn't seem to be triggering the alert either.

[fullsteamlabs]

I'm getting this error with Chrome 53.0.2785.116 (64-bit) for Mac OS X.

Does anyone have a solution?

[stijlfigurant]

Also came across this issue on a single instance of Chrome 54 (other instances work correctly) and IE10. I would expect it to fail graciously.

[johnyluyte]

Also came across this issue on an Ionic 2 project on a Samsung S4, chrome://inspect gave "Cannot read property 'resize' of undefined". However, the same project doesn't have this error on a Sony Z3C.

Both devices shows "Mapbox GL is Supported" on http://mapbox.github.io/mapbox-gl-supported

[nicoabie]

@johnyluyte try installing xwalk for android and using this preference on cordova's config.xml

<preference name="xwalkCommandLine" value="--ignore-gpu-blacklist" />

[Millnert]

Experiencing the issue as well, on own site using mapbox-gl-js v0.26.0. Also tested the above mapbox-gl test page. Some various devices results on both:
Chrome 55.0.2883.28 beta (64-bit) -- supported
Chrome 54.0.2840.99 (64-bit) -- not supported
Chrome 53.0.2785.101 (64-bit) -- not supported
Microsoft Edge 38.1439.0.0 -- Supported
Safari iOS 13G36, v9.3.5 (iPad 2) -- Supported
Samsung Galaxy S5, stock Internet browser, v4.0.20-10, Android 6.0.1 -- Supported

This was working just some days ago on the Chrome versions. Strange.

[Millnert]

Updated the "Chrome 54.0.2840.99" to 54.0.2840.100. And now it works again. Can't exclude the browser restart as source of fix however. Browser restart did not fix "Chrome 53.0.2785.101".

[Millnert]

Implemented fallback to mapbox.js based on logic from mapbox-gl-supported/index.js.

[SegFault0x0]

The issue is due to Chrome refusing to support WebGL if they think the performance will be sub-par and taxing on your system. This is determined by their graphics card blacklist. (You can test your current support by visiting https://get.webgl.org/) If Hardware Acceleration is enabled and it's still giving you issues, you'll need to do the following...

Go to chrome://flags and enable the _Override software rendering list_ option. It's the same as the --ignore-gpu-blacklist flag that @nicoabie suggested (although, attempting to start Chrome with that flag didn't work for me).

[rolandoldengarm]

On an Azure machine, Chrome always disable hardware acceleration. So the only way to get Mapbox working is by setting above setting.
This feels very hacky. Is there a solution underway?

[GavinThomas1192]

@SegFault0x0 solution worked for myself.

[jfirebaugh]

Done in #6744.