Mapbox-gl-js: IE11 won't render the map.

[roelvanhintum]

I tried running this example on IE11: https://www.mapbox.com/mapbox-gl-js/examples/
The map does not render at all. I did get something in the console:

Warning:

Not using VertexArrayObject extension.

Error, after tilting the invisible map:

SCRIPT5007: Unable to get property 'bearingSnap' of undefined or null reference
File: mapbox-gl.js, Line: 162, Column: 1987

[roelvanhintum]

After some more testing i found that v0.18.0 did work, v019.0 and v019.1 did not.

[roelvanhintum]

Note: v0.18.0 only works when downloading the precompiled js, installing with npm uses newer dependencies causing the same problem. This hopefully narrows down the problem.

[mourner]

The bearingSnap thing is a different issue (caused by options refactor @lucaswoj), but the blank screen and the deps clue is very interesting... Will be tricky to track down.

[lucaswoj]

The bearingSnap thing is a different issue (caused by options refactor @lucaswoj),

➡️ #2680

[roelvanhintum]

In case anyone is interested, i fixed it for now by using a raster fallback. IE11 shows solid performance using raster styling.

var style = 'mapbox://styles/USER/MAPSTYLE';
var isSupported = mapboxgl.supported({ failIfMajorPerformanceCaveat: true });

// Fallback for older browsers.
if (!isSupported) {
    style = {
        version: 8,
        zoom: 13.418862563061706,
        sources: {
            'raster-tiles': {
                type: 'raster',
                tiles: [
                    'https://api.mapbox.com/styles/v1/USER/MAPSTYLE/tiles/{z}/{x}/{y}?access_token=' + accessToken,
                ],
                tileSize: 512,
            },
        },
        layers: [
            {
                id: 'simple-tiles',
                type: 'raster',
                source: 'raster-tiles',
                minzoom: zoom,
                maxzoom: this.mapMaxZoom,
            },
        ],
        sprite: 'mapbox://sprites/USER/MAPSTYLE',
        glyphs: 'mapbox://fonts/USER/{fontstack}/{range}.pbf',
    };
}

this.map = new mapboxgl.Map({
    container: 'map',
    style: style,
});

[lucaswoj]

I know two things at this point:

• the root problem seems to be an inability to pass messages to / from the workers
• the bug seems to affect past versions of GL JS that were previously known to work on IE11 (I hope my testing methodology is wrong here 😞) _Yup, my methodolgy was wrong, the breaking change was introduced between v0.18.0 and v0.19.0_

[mourner]

@lucaswoj interesting, this seems to contradict an earlier statement:

Note: v0.18.0 only works when downloading the precompiled js, installing with npm uses newer dependencies causing the same problem.

[lucaswoj]

maybe related: https://github.com/substack/webworkify/issues/26

[deefour]

Is this actually fixed? I'm running mapbox-gl 0.38.0 and 0.39.1 and neither work in IE11 due to a "SecurityError" from web_worker.js at this line:

return new window.Worker(workerURL);

[JAugustusSmith]

I'm also getting the same error in IE 11

[deefour]

@JAugustusSmith I sorted this out. I use the IE11 VM from modern.ie for IE testing. This VM has a "pre-release" build of IE from back in 2014. Microsoft seems to have never updated the VM image. WebGL is busted in that pre-release version.

Run windows software updates within the VM and you'll get an updated version of IE11 that works great.