Mapbox doesn't always load on Microsoft Edge

[alansammarone]

Mapbox appears to not load fully at times when on Microsoft Edge - and this happens even on the examples page with the simplest possible code.

mapbox-gl-js version: 0.38.0
Microsoft Edge version: Microsoft Edge 38.14393.1066.0

Steps to Trigger Behavior

1. On Edge, reload the Mapbox examples page multiple times

Expected Behavior

Map should load.

Actual Behavior

https://www.dropbox.com/s/pvxmwoj0rsd9awd/Screeny%20Video%20Jun%2010%2C%202017%2C%203.16.20%20PM.mov?dl=0

[gpbmike]

Here's a screenshot of the browser support example not loading. 😄

[mourner]

Is there anything in the console? Any other details you could share to help us diagnose the issue?

[gpbmike]

Is there anything in the console? Any other details you could share to help us diagnose the issue?

Sorry, nothing useful.

I suspect it's still this problem: #3040 -> https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9243268/

[dagjomar]

I just came across this issue myself now the last few days. Also came to the same conclusion that it seems pseudorandom when it occurs. Although in some test cases, it seems to be almost consistently every 2nd load. If I keep loading the basic example page on mapbox webpages, the example WORKS, BREAKS, WORKS, BREAKS, WORKS, BREAKS.....etc whenever I refresh the page.

Nothing in the console that helps debug here either.

Also Edge 14 / 38
specifically:
Microsoft Edge 38.14393.1066.0
Microsoft EdgeHTML 14.14393

[dagjomar]

@mourner Any new knowledge about this? It seems a bit critical that the map does not work on an entire major browser version like Edge 14.

[ralphking]

I am also having this issue, in Edge and often in Chrome 60 as well. Nothing at all in the console, just blank map. Refresh sometimes works, sometimes doesn't.

it's not something that can be easily reproduced. It also only seems to be certain machines. I have never had an issue using OSX or any Linux Flavour, but Windows users are having this issue in both Edge and Chrome.

[jfirebaugh]

I'm not able to reproduce the issue.

Microsoft Edge 41.16299.15.0
Microsoft EdgeHTML 16.16299

I've loaded https://www.mapbox.com/mapbox-gl-js/example/simple-map/ probably 50 times in succession, each time successfully rendering a full map.

[jfirebaugh]

I haven't seen any reports of this issue occurring in versions more recent than Edge 38. It's expected not to work in 38 because of https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9545866/, an issue for which there is no viable workaround. If you are experiencing the issue with Edge 38, please re-enable Windows updates or otherwise ensure that the latest Edge version is installed. Edge 38 is more than a year old now, and likely contains serious security vulnerabilities in addition to this bug.

[bwyss]

I am also facing this issue. I found it on Windows 10 / IE 11 && Edge 38

Here is my solution:

// Gather some debuging information
var debug = '', compatibilityIssue = false;

var module = {
  options: [],
  header: [navigator.platform, navigator.userAgent, navigator.appVersion, navigator.vendor, window.opera],
  dataos: [
    { name: 'Windows Phone', value: 'Windows Phone', version: 'OS' },
    { name: 'Windows', value: 'Win', version: 'NT' },
    { name: 'iPhone', value: 'iPhone', version: 'OS' },
    { name: 'iPad', value: 'iPad', version: 'OS' },
    { name: 'Kindle', value: 'Silk', version: 'Silk' },
    { name: 'Android', value: 'Android', version: 'Android' },
    { name: 'PlayBook', value: 'PlayBook', version: 'OS' },
    { name: 'BlackBerry', value: 'BlackBerry', version: '/' },
    { name: 'Macintosh', value: 'Mac', version: 'OS X' },
    { name: 'Linux', value: 'Linux', version: 'rv' },
    { name: 'Palm', value: 'Palm', version: 'PalmOS' }
  ],
  databrowser: [
    { name: 'Chrome', value: 'Chrome', version: 'Chrome' },
    { name: 'Firefox', value: 'Firefox', version: 'Firefox' },
    { name: 'Safari', value: 'Safari', version: 'Version' },
    { name: 'Internet Explorer', value: 'MSIE', version: 'MSIE' },
    { name: 'Opera', value: 'Opera', version: 'Opera' },
    { name: 'BlackBerry', value: 'CLDC', version: 'CLDC' },
    { name: 'Mozilla', value: 'Mozilla', version: 'Mozilla' }
  ],
  init: function () {
    var agent = this.header.join(' '),
      os = this.matchItem(agent, this.dataos),
      browser = this.matchItem(agent, this.databrowser);

    return { os: os, browser: browser };
  },
  matchItem: function (string, data) {
    var i = 0,
      j = 0,
      html = '',
      regex,
      regexv,
      match,
      matches,
      version;

    for (i = 0; i < data.length; i += 1) {
      regex = new RegExp(data[i].value, 'i');
      match = regex.test(string);
      if (match) {
        regexv = new RegExp(data[i].version + '[- /:;]([\\d._]+)', 'i');
        matches = string.match(regexv);
        version = '';
        if (matches) { if (matches[1]) { matches = matches[1]; } }
        if (matches) {
          matches = matches.split(/[._]+/);
          for (j = 0; j < matches.length; j += 1) {
            if (j === 0) {
              version += matches[j] + '.';
            } else {
              version += matches[j];
            }
          }
        } else {
          version = '0';
        }
        return {
          name: data[i].name,
          version: parseFloat(version)
        };
      }
    }
    return { name: 'unknown', version: 0 };
  }
};

var thisEnvironment = module.init();

// Windows 7 & IE 11 needs a style to be added to the map with a delay to ensure it is rendered
if (thisEnvironment.os.name === 'Windows' && thisEnvironment.browser.name === 'Internet Explorer') {
  showSpinner();
  setTimeout(function() {
    $scope.map.setStyle('mapbox://styles/mapbox/light-v9');
    hideSpinner();
  }, 1500);
}
// Sometimes IE identifies itself as Mozilla, FF identifies itself as 'Firefox'
if (thisEnvironment.os.name === 'Windows' && thisEnvironment.browser.name === 'Mozilla') {
  showSpinner();
  setTimeout(function() {
    $scope.map.setStyle('mapbox://styles/mapbox/light-v9');
    hideSpinner();
  }, 1500);
}

// The issue is also present in Edge V38 aka chrome V51
if (navigator.userAgent.indexOf('Edge') !== -1) {
  if (thisEnvironment.browser.name === 'Chrome' && Number(thisEnvironment.browser.version) < 52) {
    console.log('this is edge?!?!:');
    setTimeout(function() {
      $scope.map.setStyle('mapbox://styles/mapbox/light-v9');
      hideSpinner();
    }, 1500);
  }
}

[jfirebaugh]

@bwyss Any particular reason you're using Edge 38 rather than the current version?

[bwyss]

Sadly the majority of my client base is using older computers with outdated IE and Edge

[andrewharvey]

Sadly the majority of my client base is using older computers with outdated IE and Edge

I can understand this, it's very common within government for IT departments to disable auto updates and lock the browser on older versions with known security issues.

Ideally mapbox-gl-supported would check this and just issue a message to upgrade or fallback to Mapbox.js in such situations. Or you could do you own check before Mapbox GL JS loads.

[jfirebaugh]

For IE11, that's understandable. But Edge is intended to be an "evergreen" browser like Chrome, Firefox, and Safari, updated automatically and transparently by Windows.

[tgecho]

It's worth noting that the "Edge" version number (currently at 41.x) is actually not the one to be looking at in this case. EdgeHTML is versioned separately (currently at 16), and these updates are rolled out with the incremental Windows 10 updates.

My understanding (which matches what I observe in our stats) is that users are pretty well spread across versions 14-16. I wouldn't be at all surprised if some companies block the updates for a while.

The Edge update situation is better than historical IE, but I'm afraid it's not quite up to par with the other browsers. :(

[thin-k-design]

Same issue here.

For me it works to set the map style directly after initializing the map:

var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/light-v9',
            zoom: 10,
            center: [11.5819805, 48.1351253]
        });
map.setStyle('mapbox://styles/mapbox/light-v9');

[Tofandel]

That issue is still present with the latest version of edge and mapbox, no idea why, no error message or anything, the style doesn't load, I see cancelled fetch requests but that's it

[Tofandel]

Issue also happen in other browsers, on the first page load it works fine, but after you reload the page, it doesn't display the style anymore

It seems to be a race condition between tile load, it makes 3 requests for the same and cancels 2 of them, if the last one is cancelled it doesn't display but if the first 2 are cancelled then it display fine

[asheemmamoowala]

@Tofandel This is a closed issue. To report a new issue, with a recent version of GL JS, please open a new ticket with a reproducible test case. We are not able to identify the root cause with screenshots alone.