Mapbox-gl-js: mapboxgl.supported() broken on IE 11

[andrewharvey]

mapbox-gl-js version: 0.17.0

Steps to Trigger Behavior

On Internet Explorer 11, version 11.0.9600.18282

1. Open https://www.mapbox.com/mapbox-gl-js/example/check-for-support/

Expected Behavior

Either map loads successfully or an alert saying my browser doesn't support Mapbox GL.

Actual Behavior

No alert shown but map doesn't load.

In the console there are multiple "Unimplemented type: 3" errors originating from https://github.com/mapbox/pbf/blob/e8420b9ef69a62b33355bb2e8455d338a3c9ceb5/index.js#L204

[lucaswoj]

I am unable to reproduce this bug in IE 11.0.9600.18204

We've seen error messages like this a number of times before. In every case, they were caused by incorrect tile compression / decompression. (https://github.com/mapbox/mapbox-gl-js/issues/1567 https://github.com/mapbox/mapbox-gl-js/issues/830).

I wonder whether this is

1. a machine-dependent bug
2. a new IE bug
3. or a capability that we aren't checking in mapboxgl.supported

[andrewharvey]

Thanks for trying to verify this.

I am unable to reproduce this bug in IE 11.0.9600.18204

I'm not surprised by this as I think it used to work for me on the exact same machine before. I've had other people also tell me they run into issues on IE too with mapboxgl.supported reporting true but the maps failing.

We've seen error messages like this a number of times before. In every case, they were caused by incorrect tile compression / decompression. (#1567 #830).

I'll see if I can narrow down the root cause further.

[mourner]

@andrewharvey any update on this?

[andrewharvey]

I'm not sure how to debug this. What information would help? If I can narrow it down to a test case in mapbox/pbf that would be best but I'm not sure how to do that.

I know it's being caused when reading the map tile PBFs, specifically in Pbf.prototype.skip val/type is 3, hence the exception being thrown. The val/type is 3 because Pbf.prototype.readFields, this.readVarint() is returning 3 at tag = 0 and startPos = 10.

The buffer from readVarint is at https://gist.github.com/anonymous/50869652c6c60b529ab774df25ed6f30

[noemiwalzebuck]

@lucaswoj @andrewharvey @mourner - I just spoke with another user who seems to be having rendering issues on IE 11 using version 0.17.0 too.

Was there ever a resolution to this issue in the past three weeks since @mourner asked about it again? Would a temporary bandaid for the user be to suggest they upgrade beyond 0.17.0?

Thanks!

[andrewharvey]

I can't work out how to debug the root cause for the issue I was seeing. I just tested it again now on 0.19.1, but I hit https://github.com/mapbox/mapbox-gl-js/issues/2677 so can't comment on this issue further.

[lucaswoj]

#2677 is now fixed in master

[noemiwalzebuck]

Thanks @lucaswoj - can you clarify if this fix works on 0.19.1? The user upgraded to this version and is saying he's still not able to render the maps, but now apparently 0.17.0 seems to be working.

With IE 11 + version 0.19.1 he's getting the following error:

Not using VertexArrayObject extension

[lucaswoj]

@noemiwalzebuck This ticket is about Unimplemented type: 3 errors. Let's talk about #2677 in #2677 and Not using VertexArrayObject extension offline. 😄

[andrewharvey]

Confirmed the Unimplemented type: 3 errors issue is still present on my IE 11 with gl js 0.20.0.

[MathiasGmeiner]

I tried clustering with gl js 0.20.0 on IE 11 and got the following errors:

 'Uint8ClampedArray' is undefined
File: mapbox-gl.js, Line: 210, Column: 2693

and

'mapboxgl' is undefined
File: cluster, Line: 444, Column: 5

doesn't matter if I check with my own code or check it on https://www.mapbox.com/mapbox-gl-js/example/cluster/

[mourner]

@MathiasGmeiner I've seen this error before and as far as I remember, it's related to a security update for Windows that also updated IE11 to support Uint8ClampedArray. See also #2444

[MathiasGmeiner]

@mourner thanks for the reply https://github.com/mapbox/mapbox-gl-js/issues/2504#issuecomment-225522881! I tried it now on a Windows 10 installation and it works as it should, nice!

[andrewharvey]

On further investigation it appears to be a Microsoft issue where unless you have the latest security patches gzip encoding isn't working, as trying to load a JavaScript resource from another URL with gzip encoding has the same issue. Something like http://connect.microsoft.com/IE/feedbackdetail/view/950689/bug-with-the-latest-security-updated-compressed-script-files-dont-work

So it's only specific to a certain patch level of Windows 7 and probably not something you'll want to workaround in GL JS.